Html Question posted in
Some basic documentation can be found here.

Html – A Child Flexbox elements height keeps growing larger than parents flexbox containers height

I have one horizontal flexbox container that has 2 child vertical flexbox containers, like the following:

<div style="display: flex;">
    <div style="display: flex; flex-direction: column; flex-grow: 1; overflow-y: auto; min-height: 0;">
        <div style="height: 500px; background-color: red;">
            Large element with dynamic height. Scrollbar should appear when height is more than blue box.
        </div>
    </div>
    <div style="display: flex; flex-direction: column;">
        <div style="width: 200px; height: 200px; background-color: blue;">
            Small element with fixed height
        </div>
    </div>
</div>

With regard to width: The first child (the one on the left) I want to grow horizontally so it fills most of the width, while the second child I want to shrink to just fit its contents. Hence, I placed a flex-grow: 1; on the first child.

With regard to height: I want the height of the parent to fit tightly to the content of the second child since the items in the second child will be a fixed height. The first child will be a table with a dynamic number of rows so I’d like the first child to have a height no larger than the height of its parent and if the first child’s height is too large then I get a scrollbar. Hence, I placed a min-height: 0; overflow-y: auto;

The Problem: As the first child grows larger I never get the scrollbar to appear (even once the first child’s height grows larger than the second child’s height). No matter what, the parent’s height is always the larger of its children’s heights.

enter image description here

Tags:

2

Answers


  1. 0

    Probably not the most perfect solution, but it might work: the content of a first child can be wrapped in an additional absolutely positioned scrollable container.

    It must be stretched to fit the first child (the one on the left) completely.

    .flexbox {
  display: flex;
}

.first-child {
  flex-grow: 1;
  position: relative;
}

.second-child {
  display: flex;
  flex-direction: column;
}

.content-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.content {
  height: 500px;
  background-color: red;
}

.second-content {
  width: 200px;
  height: 200px;
  background-color: blue;
}
    <div class="flexbox">
  <div class="first-child">
    <div class="content-wrap">
      <div class="content">
        Large element with dynamic height. Scrollbar should appear when height is more than blue box.
      </div>
    </div>
  </div>
  <div class="second-child">
    <div class="second-content">
      Small element with fixed height
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Set the parent to the desired height:

    <div style="display: flex; height: 200px;">
  <div style="overflow-y: auto; flex: auto;">
    <div style="height: 500px; background-color: red;">
      Large element with dynamic height. Scrollbar should appear when height is more than blue box.
    </div>
  </div>
  <div>
    <div style="width: 200px; flex: none; background-color: blue; min-height:100%;">
      Small element with fixed height
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search