w-- w-- - 1 month ago 15
CSS Question

element after a flexbox not positioning properly

I'm trying to create a layout using flexboxes.

http://codepen.io/anon/pen/YGvJpX?editors=1100

I don't really understand how I'm supposed to get the footer element (the green thing) to appear after the flexbox, instead of behind it as shown in the codepen.

** EDIT ** forgot to mention that the position: fixed is in there in order for .stream to have it's own scrollbar that automatically extends to the size of the window.

Here is the code:



html,
body {
background: grey;
margin: 0;
padding: 0;
}
.header {
background: blue;
}
.outer {
display: flex;
position: fixed;
top: 0;
bottom: 0;
}
.outer .boxA {
flex: 0 0 250px;
background: pink;
align-self: flex-start;
}
.outer .boxC {
flex: 0 0 150px;
background: yellow;
align-self: flex-start;
}
.outer .inner {
background: white;
display: flex;
height: 100%;
width: 600px;
flex-direction: column;
}
.outer .inner .stream {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
}
.footer {
width: 100%;
background: green;
text-align: center;
}

<div class="outer">
<div class="boxA">
<h3>Some content</h3>
<p>blah blah blah</p>
</div>
<div class="inner">
<div class="header">
<h2>blah</h2>
</div>
<div class="stream">
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
<p>Hello 123 456 789 k thx bye</p>
</div>
</div>
<div class="boxC">
<h3>Box C</h3>
<p>yadda yadda</p>
</div>
</div>

<div class="footer">
<p>hello</p>
</div>




Answer

The footer is behind the outer element because being a fixed element outer is removed from the normal flow of the DOM elements. You don't need position: fixed here - remove it and get the footer right below the flexbox.

If filling everything in the viewport is what you desire, you can use viewport units (vh) instead of position: fixed to get the effect of filling everything in the viewport.

So here is something that will get you started:

  1. Removed position: fixed for the outer element

  2. Wrapped outer and footer into a wrapper element with column flex-flow:

    .wrapper{
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    

    Also distribute 100vh to the footer and outer element- say for illustration 90vh for outer and 10vh for footer

  3. Give overflow-y: auto to outer and flex-shrink: 0 to header.

  4. For smaller viewport heights, the margin of p in footer may cause overflow of body- you can set margin: 0 for the p.

html,
body {
  background: grey;
  margin: 0;
  padding: 0;
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.header {
  background: blue;
  flex-shrink: 0; 
}
.outer {
  display: flex;
  overflow-y: auto;
  height: 90vh;
}
.outer .boxA {
  flex: 0 0 250px;
  background: pink;
  align-self: flex-start;
}
.outer .boxC {
  flex: 0 0 150px;
  background: yellow;
  align-self: flex-start;
}
.outer .inner {
  background: white;
  display: flex;
  /*height: 100%;*/
  width: 600px;
  flex-direction: column;
}
.outer .inner .stream {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.footer {
  width: 100%;
  background: green;
  text-align: center;
  height: 10vh;
}
.footer p {
  margin: 0;
}
<div class="wrapper">

  <div class="outer">
    <div class="boxA">
      <h3>Some content</h3>
      <p>blah blah blah</p>
    </div>
    <div class="inner">
      <div class="header">
        <h2>blah</h2>
      </div>
      <div class="stream">
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
      </div>
    </div>
    <div class="boxC">
      <h3>Box C</h3>
      <p>yadda yadda</p>
    </div>
  </div>

  <div class="footer">
    <p>hello</p>
  </div>

</div>

For column flex-direction I guess it is a little bit tricky to adjust the overflows and heights unless you use viewport heights throughout the nested flexboxes.

Let me know your feedback on this. Thanks!