How to fill remaining height of container using flexbox?

Question

I want to make a div fill the remaining height of a parent container. I know that there are many other similar questions around and the common flexbox solution to this problem is to use a column oriented flexbox wrapper around the content that grows to fill the height. This isn't working for me. In the image below, I'm trying to make the container of the green and pink content fill the remaining height of the parent container with red border.

.container {
  width: 600px;
  height: calc(100vh - 100px);
  border: 1px solid red;
}

.something-before {
  background: lightblue;
  height: 50px;
  margin: 10px 0;
}

.text-wrap {
  display: flex;
  flex-direction: column;
}

.text-wrap>div {
  flex-grow: 1;
}

.text-content {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.text-left {
  width: 100px;
  background: green;
  height: 100%;
}

.text-right {
  background: pink;
  flex-grow: 1;
  height: 100%;
}

<div class="container">
  <div class="something-before"></div>
  <div class="text-wrap">
    <div>
      <div class="text-content">
        <div class="text-left">
          Text<br />Text<br />Text<br />
        </div>
        <div class="text-right">
          Text<br />Text<br />Text<br />
        </div>
      </div>
    </div>
  </div>
</div>

you need to start your logic inside contianer, so text-wrap need to fill the space and so on — Temani Afif, Mar 10 '21 at 12:54

pretzelhammer · Accepted Answer · 2021-03-10T13:09:18.053

display: flex and flex-direction: column needs to be put on .container not .text-wrap. You don't even need the latter. Then if you put flex-grow: 1 on .text-content it will work as expected:

.container {
  width: 600px;
  height: calc(100vh - 100px);
  border: 1px solid red;
  display: flex;
  flex-direction: column;
}
.something-before {
  background: lightblue;
  height: 50px;
  margin: 10px 0;
}
.text-content {
  display: flex;
  flex-grow: 1;
}
.text-left {
  width: 100px;
  background: green;
}
.text-right {
  background: pink;
  flex-grow: 1;
}

<div class="container">
  <div class="something-before"></div>
  <div class="text-content">
    <div class="text-left">
      Text<br />Text<br />Text<br />
    </div>
    <div class="text-right">
      Text<br />Text<br />Text<br />
    </div>
  </div>
</div>

Just curious, why did you override height on the `.container` ? — RTF, Mar 10 '21 at 13:06
Sorry about that, I must have left that in by mistake. It's not necessary. I updated my answer to remove it. Thanks! — pretzelhammer, Mar 10 '21 at 13:10

score 1 · Answer 2 · answered Mar 10 '21 at 12:58

Add flexibility rules for class .container. Like this.

.container {
    display: flex;
    flex-direction: column;
    ...
}

And add a flex: 1 rule for .text-wrap, which will stretch your div to its full height. Like this:

.text-wrap {
    ...
    flex: 1;
}

.container {
    display: flex;
    flex-direction: column;
    width: 600px;
    height: calc(100vh - 100px);
    border: 1px solid red;
}

.something-before {
    background: lightblue;
    height: 50px;
    margin: 10px 0;
}

.text-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.text-wrap > div {
    flex-grow: 1;
}

.text-content {
    display: flex;
    flex-direction: row;
    height: 100%;
}

.text-left {
    width: 100px;
    background: green;
    height: 100%;
}

.text-right {
    background: pink;
    flex-grow: 1;
    height: 100%;
}

<div class="container">
    <div class="something-before"></div>
    <div class="text-wrap">
        <div>
            <div class="text-content">
                <div class="text-left">
                    Text<br />
                    Text<br />
                    Text<br />
                </div>
                <div class="text-right">
                    Text<br />
                    Text<br />
                    Text<br />
                </div>
            </div>
        </div>
    </div>
</div>

score 0 · Answer 3 · answered Mar 10 '21 at 12:56

0

Just add height:100% in .text-wrap

.text-wrap {
    display: flex;
    flex-direction: column;
    height:100%;
}

Without this, text-wrap only takes up the space required by its content.

answered Mar 10 '21 at 12:56

dumbPotato21

5,669
5
21
34

That causes the `.text-content` to overflow the container, because it's height is 100% of `.container` – RTF Mar 10 '21 at 13:00

How to fill remaining height of container using flexbox?

3 Answers3