CODEWITHSUNDEEP
cssflexboxspecifications
Tomáš Pustelník
Tomáš Pustelník

Reputation: 573

How exactly is calculated hypothetical main size of flex item - CSS Spec question

I have flex container with fixed width of 600px. Its flex item has flex-basis: 0 with 1px border and 16px padding. Based on spec flex base size of such item should be 0 (based on info in spec https://www.w3.org/TR/css-flexbox-1/#algo-main-item, first paragraph after E section). What is hypothetical main sizes of such item? 34 pixels (border + padding), 0px or -34px? I'm not entirely sure about this from reading the spec.

Now when calculating flex item size based on Spec section 9.7 Resolving flexible lengths. Flex factor will be flex-grow. Here based on my experiments I'm guessing hypothetical main size is actually 34px (not 0 or -34px) and thus the item is not freezed. But the initial free space will not be 600px (since flex-base size is 0), but only 566px (We extracted hypothetical main size from container size, 600px - 34px = 566px).

Is that correct assumption?

Upvotes: 5

Views: 520

Answers (1)

Temani Afif
Temani Afif

Reputation: 273626

Yes correct. In the Specification you can read:

The hypothetical main size is the item’s flex base size clamped according to its used min and max main sizes (and flooring the content box size at zero).

So your min size here is 34px (padding and border) and the item will not be freezed like you noticed. It will be in case you are using flex-shrink:1 (which is the default value) and flex-grow:0

.box {
  border:1px solid;
  display:flex;
  width:600px;
}
.box div {
  padding:16px;
  border:1px solid red;
  background:blue;
  flex-shrink:1;
  flex-basis:0;
}

.box span {
  width:100%;
  flex-grow:1;
  flex-basis:100%;
  background:green;
}
<div class="box">
<div></div> <span></span>
</div>

As you can see the element will not shrink because it's freezed.

if using the flex shrink factor: any item that has a flex base size smaller than its hypothetical main size

Upvotes: 1

Related Questions