I've read that flex-basis should override width. But in this example,both containers have flex-basis:0, but the second one also has width:50px defined and it clearly has an effect of making the size equal.
So I'm puzzled by 2 related things:
- why didn't flex-basis:0 override the width (I'd expect no effect when adding
widthto css) - why didn't flex-basis:0 worked to set the hypotethical size to 0 resulting in the equal width without adding width
As I understand from the spec:
Determine the flex base size and hypothetical main size of each item:
- If the item has a definite used flex basis, that’s the flex base size.
- The hypothetical main size is the item’s flex base size clamped according to its used min and max main sizes (and flooring the contentbox size at zero).
So flex base size is set and should resolve to 0. Hypothetical main size should also resolve to 0 since there are min/max width constraints.
.container1, .container2 { width: 210px; height: 200px; padding: 10px; border: solid; display: inline-flex; box-sizing: border-box; div { margin: 1px; flex: 1 1 0; }& div:nth-child(1) { background: lightpink; }& div:nth-child(2) { background: lightblue; } } .container2 div { width: 50px; }<div class="container1"><div>short</div><div>looooooooooooooong</div></div><div class="container2"><div>short</div><div>looooooooooooooong</div></div>