flex: 1 1 0%flex: 1 1 0% is right. A single unitless number sets flex-grow to that number, flex-shrink to 1 and flex-basis to 0%. With a basis of 0, items share the space equally, no matter what content they hold.flex: 1 1 auto is the tempting wrong answer. That is what flex: auto means: each item starts at its content size, and only the leftover space is shared. 0 1 auto is the initial value, and 1 0 0% wrongly sets flex-shrink to 0.
Read more
- flex (MDN) (https://developer.mozilla.org/en-US/docs/Web/CSS/flex)developer.mozilla.org