Question 227085 in CSS Question posted in
Some basic documentation can be found here.

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

This is the code:

.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);
}
<div class="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>

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.

first case

second case

Tags:

2

Answers


  1. 0

    The @media query has been added to the CSS. This query will only be applied when the browser window width is less than or equal to 200px.
    The flex-wrap property has been changed to nowrap in the @media query. This will prevent the flex items from wrapping when the browser window width is less than or equal to 200px.
    This will ensure that the .first and .second elements have a height of 100px at all widths, regardless of the width of the container.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
  </div>
</body>
</html>
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);
}

@media (max-width: 200px) {
  .container {
    flex-wrap: nowrap;
  }
}
    Login or Signup to reply.
  2. 0

    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

    1. 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.

    2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search