Original Post Below:I've reproduced a reduced problem:https://codepen.io/MH-123/pen/ExJWQWq?editors=1100Here's the code pen, read below for the issue, it remains the same. I have two divs, but flex shrink isn't working on them and I'm not sure why.
I have a main flex container, that contains 1 row of 2 columns. (Each column is a flex container as well but I don't think that should matter?).
Anyways, when the user shrinks the screen horizontally, I want the left column to shrink faster than the right column (which should make the columns' items smaller proportionally).
I've tried lots of things, adding flex-shrink to the columns, altering flex-basis, removing widths, etc. but nothing seems to work:
https://codepen.io/MH-123/pen/gOymoqM?editors=1100
/* BASE STYLES */:root { --clr-dark: #0f172a; --clr-light: #f1f5f9; --clr-accent: #e11d48;}*,*::before,*::after { box-sizing: border-box;}body { margin: 0; padding: 0; line-height: 1.6; word-spacing: 1.4px; font-family: "Roboto", sans-serif; color: var(--clr-dark); background-color: var(--clr-light); display: flex; justify-content: center; align-items: center; height: 100vh;}.container { width: 50%; height: 650px; margin: 0 auto; border: 10px solid var(--clr-dark);}.item { background-color: #fb7185; display: flex; justify-content: center; align-items: center; border: 1px solid red;}/* END OF BASE STYLES */.container { display: flex; flex: row nowrap;}.colLeft, .colRight { height: 100%; border: 5px solid blue; display: flex; flex-flow: column nowrap; justify-content: space-evenly; align-items: center; align-content: space-around;}.colLeft { flex-grow: 1; flex-shrink: 10;}.colRight { flex-grow: 1; flex-shrink 1;}.item-1 { flex: 0 1 30%; width: 95%; display: flex;}.item-a { height: 100%; width: 50%;}.item-b { height: 100%; width: 50%;}.item-2 { flex: 0 1 55%; width: 95%;}.item-3 { flex: 0 0 55%; width: 95%;;}.item-4 { flex: 0 0 30%; width: 95%;}<div class="container"><div class="colLeft"><div class="item item-1"><div class="item item-a">1a</div><div class="item item-b">1b</div></div><div class="item item-2">2</div></div><div class="colRight"><div class="item item-3">3</div><div class="item item-4">4</div></div></div>edit: Here's my codepen where I remove all widths' from childrenhttps://codepen.io/MH-123/pen/abxJqZg?editors=0100