Неправильная высота для элемента div с соотношением сторон в родительском элементе flex-wrap. ⇐ Html

[Anonymous]

Переполнение содержимого в гибком макете, содержащем элементы соотношения сторон, когда вы устанавливаете flex-wrap: Wrap.
Я пытался установить соотношение сторон, используя высоту: 0 и отступ-дно: %. в этом случае высота div больше, но содержимое также переполняется.
При использовании flex-wrap: nowrap ведет себя так, как ожидалось.
Что может произойти?
Вот минимальный пример. Вы также можете увидеть, как он работает в скрипте.


.row {
max-width: 300px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
/* set to nowrap and it will work */
}

.elem {
background: #0c0;
color: white;
text-align: center;
aspect-ratio: 16/9;
}

.next-elem {
background: #00c;
padding: 20px;
opacity: 0.75;
color: white;
text-align: center;
}


Forced ratio elem


Next elem





Вот немного сложный пример, также написанный на скрипке, основанный на этом коде.




TEST FLEX WRAP


* {
box-sizing: border-box;
}
html {
margin: 0;
padding: 15px;
}
.main-row {
display: flex;
flex-direction: row;
justify-content: center;
}
.main-block {
margin-bottom: 20px;
max-width: 300px;
margin-left: 10px;
margin-right: 10px;
}
section {
border-bottom: 1px solid #cccccc;
margin-bottom: 20px;
padding-bottom: 20px;
}
.elem { background: #0c0; color: white; text-align: center; }
.next-elem { background: #00c; padding: 20px; opacity: 0.75; color: white; text-align: center; }

.test-aspect-ratio .elem { aspect-ratio: 16/9; }
.test-padding .elem { height: 0; padding-bottom: 56.25%; }
.test-height .elem { height: 200px; }

.row {
display: flex;
flex-direction: column;
}
.test-flex-wrap .row {
flex-wrap: wrap;
}
.test-flex-wrap .test-2 {
padding-bottom: 188px;
}





Without flex-wrap: wrap;

test 1: height in pixels
Forced height elem
Next elem



test 2: heigth with aspect ratio


Forced ratio elem


Next elem





test 3: height: 0; padding-bottom: 56.25%;


Forced ratio elem


Next elem





With flex-wrap: wrap;

test 1: height in pixels
Forced height elem
Next elem



test 2: heigth with aspect ratio


Forced ratio elem


Next elem





test 3: height: 0; padding-bottom: 56.25%;


Forced ratio elem


Next elem










Подробнее здесь: https://stackoverflow.com/questions/793 ... rap-parent