I'm very confused on why my flex-shrink isn't working until I set a fixed width or height on the item I want shrunk faster than the others.
https://codepen.io/MH-123/pen/ExJWQWq
You can see here how the left and right column shrink at the same rate, and the flex-shrink doesn't seem to affect it. But if you change colLeft and colRight's width to 300px for example, once the container shrinks to 600px and less, THEN the flex-shrink starts kicking in.I want to know how I can make the flex-shrink activate right away without setting the fixed width of the left column.
If the only way to achieve this is to set an arbitrary width to flex items, what's the best practice? Using px? em?
*, *::before, *::after { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box;}body { margin: 0; height: 100vh; width: 100vw; border: 2px solid black;}.container { width: 100%; height: 100%; border: 2px solid blue; display: flex; justify-content: center; align-items: center; flex: row nowrap;}.colLeft, .colRight { height: 100%; width: 50%; border: 2px solid red; display: flex; flex-flow: column nowrap; justify-content: space-evenly; align-items: center; align-content: space-around;}.colLeft { flex: 1 10 auto;}.colRight { flex: 1 1 auto;}<body><div class="container"><div class="colLeft"> 1</div><div class="colRight"> 2</div></div></body>