Behavior With Height/minheight And Display:flex

I am observing following behavior. This code:

Solution 1:

From the specification

Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency. When calculating the intrinsic size contribution of such a box (including any calculations for a content-based automatic minimum size), a cyclic percentage ...

Then a whole set of complex rules and:

Then, unless otherwise specified, when calculating the used sizes and positions of the containing block’s contents:

1. If the cyclic dependency was introduced due to a block-size or max-block-size on the containing block that causes it to depend on the size of its contents, the box’s percentage is not resolved and instead behaves as auto.

2. Otherwise, the percentage is resolved against the containing block’s size. (The containing block’s size is not re-resolved based on the resulting size of the box; the contents might thus overflow or underflow the containing block).

Basically we need to see if the percentage can be resolved without any cyclic denpendeny or not.

In the second case, you defined the container to have a min-height which means that its height will be defined by its content so we need to first know the content height to find the height of the container and this will make the percetange height fail to auto because we cannot resolve it since we only have min-height:300px and we need to also find the height based on the content.

In the first case, you defined the container to have height:100% so the height is defined but we still have only min-height in the child element. Here it's a bit complex because the height of that element can be found using the flex properties. Basically the browser can resolve the height of that element without knowing its content then use the calculated height to resolve the percentage value.

Here is a basic example to better illustrate:

.box {
  display: flex;
  flex-direction: column;
  border:1px solid red;
  margin:10px;
}

.box>div {
  border: 1px solid;
}

.height {
  height: 80%;
  background: red;
}

<divclass="box"style="min-height:200px;"><divstyle="min-height:100px;"><divclass="height">content here</div></div></div><divclass="box"style="height:200px;"><divstyle="min-height:100px;"><divclass="height"> content here</div></div></div><divclass="box"style="height:200px;"><divstyle="flex-basis:50%;"><divclass="height"> content here</div></div></div><divclass="box"style="height:200px;"><divstyle="flex-grow:1;"><divclass="height"> content here</div></div></div>

You can see that in all the cases where the height of the flex container is defined we are able to resolve the percentage height of the nested element because the browser is able to calculate the height without the need of the content.

In reality, the content is also used to define the height which add more complexity. Let's consider the below example:

.box {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  margin: 10px;
}

.box>div {
  border: 1px solid;
}

.height {
  height: 80%;
  background: red;
}

<divclass="box"style="height:200px;"><divstyle="flex-basis:50%;"><divclass="height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar nunc sit amet justo congue, et convallis diam porttitor. Curabitur semper tellus eget semper vehicula. In auctor ut nunc vitae faucibus. Integer molestie aliquam lacinia.
      Vestibulum blandit sem vitae tortor fermentum auctor. Morbi pharetra ante laoreet vestibulum laoreet. Nam id tempor eros, non ultrices leo. Quisque tincidunt hendrerit tortor ut malesuada.
       Vestibulum blandit sem vitae tortor fermentum auctor. Morbi pharetra ante laoreet vestibulum laoreet. Nam id tempor eros, non ultrices leo. Quisque tincidunt hendrerit tortor ut malesuada.</div></div></div>

You can see that the text is overflowing the red div (its container) and the height of the flex item is matching the height of the text. In this case, the browser is still able to identify the height of the flex item based on the flex properties and those properties also consider the content!

A flex item cannot shrink past its content size that's why flex-basis:50% is not giving 50% of the parent height but the min value between 50% and the content height.

If you add min-height:0 you will have a different behavior:

.box {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  margin: 10px;
}

.box>div {
  border: 1px solid;
}

.height {
  height: 80%;
  background: red;
}

<divclass="box"style="height:200px;"><divstyle="flex-basis:50%;min-height:0"><divclass="height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar nunc sit amet justo congue, et convallis diam porttitor. Curabitur semper tellus eget semper vehicula. In auctor ut nunc vitae faucibus. Integer molestie aliquam lacinia.
      Vestibulum blandit sem vitae tortor fermentum auctor. Morbi pharetra ante laoreet vestibulum laoreet. Nam id tempor eros, non ultrices leo. Quisque tincidunt hendrerit tortor ut malesuada.
       Vestibulum blandit sem vitae tortor fermentum auctor. Morbi pharetra ante laoreet vestibulum laoreet. Nam id tempor eros, non ultrices leo. Quisque tincidunt hendrerit tortor ut malesuada.</div></div></div>

Now the flex item is taking 50%of the parent height (ignoring its content) then its child element is taking 80% of that height and the content is logically overflowing.

---

TL;DR

A flex item (when the flex direction is column and the flex container have an explicit height) will have its height defined by the flex properties and considering the content inside (basically the content will only set the min-height constraint) then after calculating that height the browser can resolve any percentage value of height for the items inside.

---

Here is a related question where we have a similar issue and where we are able to resolve the percentage value: Why is my Grid element's height not being calculated correctly?

Share