Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flexbox - Fill remaining space [duplicate]

Tags:

html

css

flexbox

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..

enter image description here

Is flexbox the best thing to use in this situation?

like image 482
fightstarr20 Avatar asked Jun 01 '18 18:06

fightstarr20


People also ask

How do I fill the remaining space on my Flexbox?

You can use the flex-grow property to force an item to fill the remaining space on the main axis of a flex container. The item will expand as much as possible and occupy the free area.

How do I fill a remaining space in CSS?

The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.


2 Answers

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;
}

Screenshot after changes.

like image 150
Aamir Khan Avatar answered Oct 19 '22 16:10

Aamir Khan


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;

like image 2
DavidW Avatar answered Oct 19 '22 16:10

DavidW