Content overflow in flex layout containing aspect-ratio items when you set flex-wrap: wrap.
I tried to set aspect ratio using height: 0 and padding-bottom: %. in that case the div height is greater but content also overflows.
With flex-wrap: nowrap behaves as expected.
What could be happening?
Here is a mimimal example. You can also see it running in fiddle.
.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;}<div class="row"><div class="col"><div class="elem">Forced ratio elem</div></div><div class="col"><div class="next-elem">Next elem</div></div></div>Here is a a bit complex example also in fiddle, based on this code.
<!doctype html><html><head><meta charset="utf-8" /><title>TEST FLEX WRAP</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><style type="text/css"> * { 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; }</style></head><body><div class="main-row"><div class="main-block"><h2>Without flex-wrap: wrap;</h2><section class="test-1 test-height"><h2>test 1: height in pixels</h2><div class="elem">Forced height elem</div><div class="next-elem">Next elem</div></section><section class="test-2 test-padding test-aspect-ratio"><h2>test 2: heigth with aspect ratio</h2><div class="row"><div class="col"><div class="elem">Forced ratio elem</div></div><div class="col"><div class="next-elem">Next elem</div></div></div></section><section class="test-3 test-padding test-flex"><h2>test 3: height: 0; padding-bottom: 56.25%;</h2><div class="row"><div class="col"><div class="elem">Forced ratio elem</div></div><div class="col"><div class="next-elem">Next elem</div></div></div></section></div><div class="main-block test-flex-wrap"><h2>With flex-wrap: wrap;</h2><section class="test-1 test-height"><h2>test 1: height in pixels</h2><div class="elem">Forced height elem</div><div class="next-elem">Next elem</div></section><section class="test-2 test-padding test-aspect-ratio"><h2>test 2: heigth with aspect ratio</h2><div class="row"><div class="col"><div class="elem">Forced ratio elem</div></div><div class="col"><div class="next-elem">Next elem</div></div></div></section><section class="test-3 test-padding test-flex"><h2>test 3: height: 0; padding-bottom: 56.25%;</h2><div class="row"><div class="col"><div class="elem">Forced ratio elem</div></div><div class="col"><div class="next-elem">Next elem</div></div></div></section></div></div></body></html>