Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get the content of the bottom element of a flexbox to be 100% height its container

Tags:

html

css

flexbox

If I make a flexbox with 2 children and column flow and set the second child to flex-grow 1 the second child expands to fill the flexbox. This works

(ps: Didn't want to clutter the example with safari support so use Chrome or Firefox)

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  color: white;
}
#outer {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#top { 
  background-color: red;
}
#bottom {
  background-color: blue;
  flex: 1 0 auto;
}
<div id="outer">
  <div id="top">top</div>
  <div id="bottom">bottom (blue)</div>
</div>
  

But, if I then put a child #inside inside #bottom and set its height to 100% it doesn't increase its height to match even though the flexbox has stretched #bottom.

added css

#inside {
  background-color: green;
  height: 100%;
}

html

<div id="outer">
  <div id="top">top</div>
  <div id="bottom">
    <div id="inside">inside</div>  <!- added ->
  </div>
</div>

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  color: white;
}
#outer {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#top { 
  background-color: red;
}
#bottom {
  background-color: blue;
  flex: 1 0 auto;
}
#inside {
  background-color: green;
  height: 100%;
}
<div id="outer">
  <div id="top">top</div>
  <div id="bottom">
    <div id="inside">inside (green)</div>
  </div>
</div>

So I add a height: 100% to #bottom but now bottom is as big as #outer instead of the flex stretched size.

#bottom {
  background-color: blue;
  flex: 1 0 auto;
  height: 100%;   /* added */
} 

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  color: white;
}
#outer {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#top { 
  background-color: red;
}
#bottom {
  background-color: blue;
  flex: 1 0 auto;
  height: 100%;
}
#inside {
  background-color: green;
  height: 100%;
}
<div id="outer">
  <div id="top">top</div>
  <div id="bottom">
    <div id="inside">inside (green) (would not scroll if working)</div>
  </div>
</div>

How do I get #bottom to stretch to fit the flexbox and also get a the child #inside to be 100% height of its container #bottom?

like image 877
gman Avatar asked Oct 14 '15 07:10

gman


People also ask

How do you make a flex item take 100 height?

Getting the child of a flex-item to fill height 100%Set position: absolute; on the child. You can then set width/height as required (100% in my sample).

How do you set height to 100% of a parent?

container div has two parent elements: the <body> and the <html> element. And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.

How do you set the height of a flex item?

Instead of max-height: 250px you should use flex: 0 0 250px and with flex-direction: column it will set height of element to 250px.

How to align to bottom elements in CSS Flexbox?

There are multiple ways we can align to bottom elements in CSS flexbox. flex-grow makes the element takes available space in the flexbox container. Here is an flex container with display:flex and flex-group to child bottom element The button is aligned to bottom.

How to align flex items to the center of the container?

The justify-content property is used to align the flex items: The center value aligns the flex items at the center of the container: The flex-start value aligns the flex items at the beginning of the container (this is default):

How to position an element to the bottom of a container?

You can use display: flex to position an element to the bottom, but I do not think you want to use flex in this case, as it will affect all of your elements. .container { display: flex; } .button { align-self: flex-end; }

What are the CSS Flexbox properties?

The following table lists all the CSS Flexbox Items properties: Property Description flex-basis Specifies the initial length of a flex i ... flex-grow Specifies how much a flex item will grow ... flex-shrink Specifies how much a flex item will shri ... order Specifies the order of the flex items in ... 2 more rows ...


1 Answers

Flex has a quirk where you need to set the height to 0.

Change the #bottom rule's height property to this height: 0;

For the inside to work I changed it to "position: absolute" and as well added a position:relative to the bottom

Update

If you don't want to use absolute position, you can set these 2 css rules like this:

(Note though, that this propagates the original issue if a new inner div is used like the first one)

#bottom {
  position: relative;
  background-color: blue;
  flex: 1 0 auto;
  height: 0;
  display: flex;
}
#inside {
  background-color: green;
  flex: 1 0 auto;
}

Sample using "position: absolute"

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  color: white;
}
#outer {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#top { 
  background-color: red;
}
#bottom {
  position: relative;
  background-color: blue;
  flex: 1 0 auto;
  height: 0;
}
#inside {
  background-color: green;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
<div id="outer">
  <div id="top">top</div>
  <div id="bottom">
    <div id="inside">inside (would not scroll if working)</div>
  </div>
</div>
like image 130
Asons Avatar answered Oct 23 '22 11:10

Asons