Flexbox - Fill remaining space

Question

I have a basic flexbox layout like this..

body,html {
  height:100%;
  width:100%;

}

#container {
  width:100%;
  background:grey;
  display:flex;
  flex-direction:column;
}

.top {
  background:red;
  flex:1;
  padding:20px;
}

.bottom {
  background:yellow;
  flex:1;
  padding:20px;
}

<div id="container">
 <div class="top">
  Top Content
 </div>
 <div class="bottom">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis, arcu vitae sollicitudin pellentesque, quam libero imperdiet urna, eu rhoncus lorem dolor sed neque. Donec ex risus, pretium ut maximus fringilla, euismod id mi. Phasellus ligula sem, iaculis ut urna eget, efficitur vulputate sem.
  </div>
</div>

I am trying to make the top div fill the remaining space, the bottom div is dynamic so the height changes depending on the text. My result looks like this..

Is flexbox the best thing to use in this situation?

It looks like the height is filled in chrome and edge. What Browser are you using and what does it look like to you? Can you add a screenshot? — Joseph Marikle, Jun 01 '18 at 18:34
seems like a duplicate of : https://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with-css-using-displayflex/25098486 (flex:1 only on the container to fill up space and a valid height on the parent so it knows what to fill ) — G-Cyrillus, Jun 01 '18 at 20:52

score 13 · Answer 1 · edited Apr 03 '20 at 17:40

Is flexbox the best thing to use in this situation?

Yeah, it's a good idea to use flexbox in this situation.

To achieve your desired result, as I understand, you need to set height: 100% on #container so that it occupies all the space available to it. Then set flex-grow: 0 on .bottom so that it doesn't grow.

So your CSS should be:

#container {
  width:100%;
  height:100%;
  background:grey;
  display:flex;
  flex-direction:column;
}

.top {
  background:red;
  flex: 1 0 auto; // Grow, don't shrink
  padding:20px;
}

.bottom {
  background:yellow;
  flex: 0 0 auto; // don't grow, take up only needed space
  padding:20px;
}

score 2 · Answer 2 · answered Jun 01 '18 at 18:39

First, you need to make the container occupy vertical space. height: 100%; will do that.

Second, if you want the title div not to be the same size as the following div, they shouldn't both be flex: 1;, in fact you probably want the title to be flex: 0;

score 0 · Answer 3 · answered Jun 01 '18 at 18:41

The container is not set to 100% height. it's not tall enough. After you set the container to be height: 100%, you also have to set the flex-basis for each flex item. The bottom can be flex: 1 1 auto, but the top should be flex: 0 1 auto

body,html {
  height:100%;
  width:100%;
  margin: 0;
}

#container {
  width:100%;
  height: 100%;
  background:grey;
  display:flex;
  flex-direction:column;
}

.top {
  background:red;
  flex:1 1 auto;
  padding:20px;
}

.bottom {
  background:yellow;
  flex:0 1 auto;
  padding:20px;
}

<div id="container">
 <div class="top">
  Top Content
 </div>
 <div class="bottom">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis, arcu vitae sollicitudin pellentesque, quam libero imperdiet urna, eu rhoncus lorem dolor sed neque. Donec ex risus, pretium ut maximus fringilla, euismod id mi. Phasellus ligula sem, iaculis ut urna eget, efficitur vulputate sem.
  </div>
</div>

Flexbox - Fill remaining space

3 Answers3

Related