I have this code: https://codepen.io/MH-123/pen/wvZJPPZ?editors=0100As the screen width gets smaller, I want the left 2 boxes, 1 and 2 to shrink its width but I'm not sure how to achieve that as I'm new to flexbox. flex-shrink 1 on them doesn't work. I'm not sure if my initial set up is incorrect at all? Is there a way I can just adjust this quickly?Thanks!
/* 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-flow: column wrap; justify-content: space-evenly; align-items: center; align-content: space-around;}.item-1 { height: 30%; width: 50%; display: flex;}.item-a { height: 100%; width: 50%;}.item-b { height: 100%; width: 50%;}.item-2 { height: 55%; width: 50%;}.item-3 { height: 55%; width: 45%;}.item-4 { height: 30%; width: 45%;}@media all and (max-width: 600px) { .container { flex-flow: column wrap; padding: 5% 1% 2% 1%; } .item-1 { height: 20%; width: 100%; flex-direction: column } .item-a, .item-b { height: 50%; width: 100%; } .item-2 { height: 35%; width: 100%; } .item-3 { height: 30%; width: 100%; } .item-4 { height: 7.5%; width: 100%; }}@media all and (max-height: 650px) { .container { background-color: pink; flex-flow: column nowrap; padding: 5% 1% 2% 1%; } .item-1 { height: 50%; width: 100%; flex-direction: column } .item-a, .item-b { height: 80%; width: 100%; } .item-2 { height: 35%; width: 100%; } .item-3 { height: 30%; width: 100%; } .item-4 { height: 7.5%; width: 100%; }}<div class="container"><div class="item item-1"><div class="item item-a"> 1b</div><div class="item item-b">1a</div></div><div class="item item-2">2</div><div class="item item-3">3</div><div class="item item-4"> 4</div></div>