CSS Scrollable aspect-ratio

user_2170595 0
Viewed 107

I have a display: grid div that contains elements. These elements should be placed automatically as rows of elements, with a 1 / 1 aspect ratio so the parent should be scrollable.

Let's say I have 32 items, and I want them to show as 4 row of 8 items.

The items' width are shrinked to not overflow the parent, but I want them to overflow if needed.

enter image description here

Here is the parent CSS :

display: grid;
gap: 10px;
padding: 20px;
grid-auto-flow: column;
grid-template-rows: repeat(4, 1fr);

and the items CSS

aspect-ratio: 1 / 1;

It works just well if I explicitly add width or height to the children, but I want them to grow automatically.

CodePen : https://codepen.io/dbenfouzari/pen/GRmdVze?editors=1100 Try to resize the window to a smaller width to see it no working.

Thanks !

aspect-ratio css
1 Answers

Thanks to @G-Cyrillus answer, I finally get it to work simply by adding overflow: auto; on the parent wrapper and min-width: max-content; on each child !

user_21705950
Related