Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1675

Flex-basis=0 is supposed to override width, but it doesn't

$
0
0

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:

  1. why didn't flex-basis:0 override the width (I'd expect no effect when adding width to css)
  2. 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:

  1. If the item has a definite used flex basis, that’s the flex base size.
  2. 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>

enter image description here


Viewing all articles
Browse latest Browse all 1675

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>