Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flexbox inside another flexbox?

Tags:

html

css

flexbox

I'm trying to get a flexbox working inside a flexbox. While the first (wrapping) flexbox works, the one inside does nothing. Is there anyway to get this to work?

What I'm looking to do is effectively have two sticky footers and have the height of both reach the the footers.

html, body {
  height: 100%;
  margin: 0; padding: 0;  /* to avoid scrollbars */
}

#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#header {
  background: yellow;
  height: 100px;  /* can be variable as well */
  
}

#body {
  flex: 1;
  border: 1px solid orange;
  height: 100%:
}
#wrapper2 {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;
}
#body2 {
  border: 1px solid purple;
  flex: 1;
}
#footer2 {
  background: red;
  flex: 0;
}

#footer{
  background: lime;
}
<div id="wrapper">
  <div id="body">Bodyof<br/>
    variable<br/>
    height<br/>
    <div id="wrapper2">
    <div id="body2">
    blah
    </div>
    <div id="footer2">
    blah<br />
    blah
    </div>    
    </div>
    </div>
  <div id="footer">
    Footer<br/>
    of<br/>
    variable<br/>
    height<br/>
  </div>
</div>

JS Fiddle

like image 218
Shixma Avatar asked Feb 13 '17 01:02

Shixma


1 Answers

You were almost there. Just two steps away:

  1. Make #body a flex container.
  2. Give .wrapper2 full height with flex: 1.

(I also got rid of percentage heights. You don't need them.)

body {
  margin: 0;
}
#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#header {
  background: yellow;
  height: 100px;
}
#body {
  flex: 1;
  border: 1px solid orange;
  display: flex;            /* new */
  flex-direction: column;   /* new */
}
#wrapper2 {
  display: flex;
  flex-direction: column;
  flex: 1;                  /* new */
}
#body2 {
  border: 1px solid purple;
  flex: 1;
}
#footer2 {
  background: red;
}
#footer {
  background: lime;
}
<div id="wrapper">
  <div id="body">
    Bodyof
    <br>variable
    <br>height
    <br>
    <div id="wrapper2">
      <div id="body2">blah</div>
      <div id="footer2">
        blah
        <br>blah
      </div>
    </div>
  </div>
  <div id="footer">
    Footer
    <br>of
    <br>variable
    <br>height
    <br>
  </div>
</div>

jsFiddle

Once the adjustments above are made, you can pin the inner (red) footer to the bottom with:

  • flex: 1 on #body2, which is what you have, or
  • margin-bottom: auto on #body2, or
  • margin-top: auto on #footer2, or
  • justify-content: space-between on the container (#wrapper2)
like image 200
Michael Benjamin Avatar answered Oct 18 '22 02:10

Michael Benjamin