What is the principle behind the automatic height setting in flexbox when wrap

This is the code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 400px;
  background-color: antiquewhite;
}

.first {
  width: 200px;
  background-color: aquamarine;
}

.second {
  width: 200px;
  background-color: rgb(122, 88, 177);
}

.third {
  width: 200px;
  height: 200px;
  background-color: rgb(79, 152, 91);
}

<!-- language: lang-html -->

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>

<!-- end snippet -->

When .container has 400px width .third block wrap onto another line and .first and .second elements have height 100px, but when .container has 200px width .first and .second element have 66.6px height.

I don't understand why this happening and how it works.

I tried to to figure it out in some logical way but dimensions don't fit any calculations.

TL;DR The Flexbox Algorithm specification 1 has the answers you are looking for, but it's kinda complicated.

To begin, we need to answer a question why first and second div even have any height at all - as they don't have any content nor defined height value. In normal conditions they should be invisible! But we can see them. This is because flex container will try to stretch the items across the cross axis (by default).

In considered flex container, main axis is X (related to width) and cross axis is Y (related to height). In other words, height is "cross" dimension. Determining height of your items is therefore described in the spec as "Cross Size Determination". Here is an excerpt:

> 9.4. Cross Size Determination
>
> 7. Determine the hypothetical cross size of each item by performing layout with the used main size and the available space, treating auto
> as fit-content.
>
> 8. Calculate the cross size of each flex line.
>
> If the flex container is single-line and has a definite cross size,
> the cross size of the flex line is the flex container’s inner cross
> size.
>
> Otherwise, for each flex line:
> 1. Collect all the flex items whose inline-axis is parallel to the main-axis, whose align-self is baseline, and whose cross-axis
> margins are both non-auto. Find the largest of the distances between
> each item’s baseline and its hypothetical outer cross-start edge, and
> the largest of the distances between each item’s baseline and its
> hypothetical outer cross-end edge, and sum these two values.
> 2. Among all the items not collected by the previous step, find the largest outer hypothetical cross size.
>
> 3. The used cross-size of the flex line is the largest of the numbers found in the previous two steps and zero.

Taken from: https://www.w3.org/TR/css-flexbox-1/#cross-sizing

You can follow these steps to figure out the principle you are asking for. The 66.6px you are seeing probably comes from the calculation of "hypothetical cross size" in step 7 above.

1 https://www.w3.org/TR/css-flexbox-1/#layout-algorithm