CODEWITHSUNDEEP
htmlcss
user3308774
user3308774

Reputation: 1374

Flexbox parent container not growing along with its children? Content inside is overflowing out of the parent div

JsFiddle demonstrating the problem

I have two divs, A and B, inside of a container. As B's content grows, I would expect the container and A to grow along with it. However, rather than doing that, the content in B overflows, which causes the page layout to break.

All of the heights are set to 100%. Why is content overflowing?

html,
body {
  height: 100%;
}

.side {
  flex: 0 0 250px;
  background-color: blue;
  height: 100%;
}

.mycontainer {
  display: flex;
  height: 100%;
}

.main {
  padding: 0 20px 0 20px;
  flex: 1 1 auto;
  height: 100%;
}
<div class="mycontainer">
  <div class="side"></div>
  <div class="main">
    <div>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
    </div>
  </div>
</div>

Upvotes: 7

Views: 12336

Answers (2)

Rob Fink
Rob Fink

Reputation: 1

You can also set a min-height on the parent (e.g. body {min-height: 100vh;} as an example). This way it will allow the parent container to continue to grow as necessary.

Upvotes: 0

zb&#39;
zb&#39;

Reputation: 8059

just remove height from container and side, or set it auto:

the overflow happens because 100% is initial size of html.

html,
body {
  height: 100%;
}

.side {
  flex: 0 0 250px;
  background-color: blue;
  height: auto;
}

.mycontainer {
  display: flex;
  height: auto;
}

.main {
  padding: 0 20px 0 20px;
  flex: 1 1 auto;
  height: 100%;
  background: green;
}

.expand {
  height: 400px;
  transition: height 0.3s;
}

.expand:hover {
  height: 200px;
}
<div class="mycontainer">
  <div class="side"></div>
  <div class="main">
    <div>
      <div class="expand"></div>
    </div>

  </div>
</div>

ps: for demonstrate block resizes, just use expanders, to make less noise code.

Upvotes: 8

Related Questions