I need to fit 1x1 items (could be avatars) inside a flex row container of a predetermined ratio that can grow based on parents. Problem is that under a certain number of items, they overflow the container vertically (flex cross axis).
Here is a fiddle: https://jsfiddle.net/3hv0bxuf/3/HTML:
<html><body><div class="container"><div class="item"><div class="subitem"> 1</div></div><div class="item"><div class="subitem"> 2</div></div></div></body></html>CSS:
div.container { margin-top: 40px; /* display: grid; */ display: flex; /* grid-template-columns: 1fr 1fr; */ /* grid-template-rows: 1fr; */ /* align-items: center; */ width: 300px; height: 100px; padding: 10px; background-color: lightblue; align-items: center;}.item { flex: 1 1 0; display: flex; /* align-items: stretch; */ border: 1px solid black; padding: 3px; /* object-fit: contain; */}.subitem { /* width: 100%; */ flex: 1 1 0; aspect-ratio: 1; border: 1px dashed black; max-height: 100%; max-width: 100%;}Tried display: grid instead of flex, with same results.I am expecting a structure that dynamically fits items on both axis without specifying px dimensions.