CODEWITHSUNDEEP
htmlcssflexbox
Henrique Inonhe
Henrique Inonhe

Reputation: 175

Flexbox limits child items height when child item height is set to auto

I have three divs: outer, inner, deeper, where each one is the parent of the next.

"Deeper" has its height set to a fixed value, whereas "inner" is set to auto.

I'd expect that "inner" height is the same as "deeper" height, but turns out that it is limited by "outer" height whenever "outer" display is set to flex.

However when "outer" display is set to "block" it works as expected.

Why does this happen?

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.outer {
  height: 400px;
  overflow-y: auto;
  border: 1px solid gray;
  display: flex;
}

.inner {
  margin: 50px 0;
  background-clip: content-box;
  height: auto;
}

.deeper {
  height: 600px;
  width: 200px;
  background-color: red;
}
<div class="outer">
  <div class="inner">
    <div class="deeper"></div>
  </div>
</div>

Upvotes: 0

Views: 71

Answers (2)

hamid-davodi
hamid-davodi

Reputation: 1966

here I posted another code to show my previous conclusion better. in this code you can change the "display:flex" to "display:block" to see the effect in inspect window.

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.outer {
  height: 400px;
  border: 1px solid gray;
  display: flex;
  /* the above "display:flex" makes the children of this tag to have the fixed height. */
}

.inner {
  height: auto; /* the height defined here does not affect, you can inspect the tag to see that the height is "400px". */
  background-color: #242;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-box</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="outer">
  <div class="inner">
  </div>
</div>

</body>
</html>

Upvotes: 1

hamid-davodi
hamid-davodi

Reputation: 1966

I think what you would expect is wrong. see the code below:

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.outer {
  height: 400px;
/*  overflow-y: auto;*/
  border: 1px solid gray;
  display: block;
}

.inner {
/*  margin: 50px 0;*/
/*  background-clip: content-box;*/
  height: 500px;
  background-color: #242;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-box</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   
<div class="outer">
  <div class="inner">
<!--    <div class="deeper"></div>-->
  </div>
</div>
    
</body>
</html>

this is a very simple example. in this case I commented the "deeper" div. and also I commented the "overflow" and "background-clip" properties, because I think that they are not related to the question about "height".

what I want to say is that in this case we have the ".outer" div with "display:block" and a fixed "height". in that div we have another div with "height:500px" that is taller from his parent. you may see only this 500px div. but if you "inspect" you will notice that the height of ".outer" div is 400px. so we can conclude that

if we have a tag with "display:block" and a "fixed height", the height of this tag is not changed according to its child.

so in the case of "your question", we have the ".inner" div and its child is the ".deeper" div. ".inner" div has "display:block" and has a fixed height because:

"align-items" property, which has an initial value of "stretch" makes the children of a div with "display:flex" (that is the ".inner" div) to have the height of their parent (means the ".inner" has "400px" height)

so according to our conclusion height of ".inner" is not changed with the height of ".deeper".

Upvotes: 0

Related Questions