Неправильная высота для элемента div с соотношением сторон в родительском элементе с гибкой оберткой. ⇐ 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