2

I started with reading Flexbox and vertical scroll in a full-height app using NEWER flexbox api. And the following works pretty well:

html,body{
    overflow: hidden;
    width: 100%; height: 100%;
    max-height: 100%; max-width: 100%;
    margin: 0; padding: 0;
}

.site-container {
  height: 100%; width: 100%;
  display: flex;
  flex-direction: column;
}

.site-container .site-header,
.site-container .site-footer{
  flex: 0 0 auto;
  overflow: visible;
}

.site-container .site-body {
  position: relative;
  overflow: auto;
  min-height: 0px;
  flex: 0 1 auto;
  }
<div class="site-container">
  <div class="site-header">
    <div style="height: 40px;background-color:YellowGreen">My Header Test </div>
  </div>
  <div class="site-body">
          blah1<br />
          blah2<br />
          blah3<br />
          blah4<br />
          blah5<br />
          blah6<br />
          blah7<br />
          blah8<br />
          blah9<br />
          blah10<br />
          blah11<br />
          blah12<br />
          blah13<br />
          blah14<br />
          blah15<br />
          blah16<br />
          blah17<br />
          blah18<br />
          blah19<br />
          blah20<br />
          blah21<br />
          blah22<br />
          blah23<br />
          blah24<br />
          blah25<br />
          blah26<br />
          blah27<br />
          blah28<br />
          blah29<br />
          blah30<br />
          blah31<br />
          blah32<br />
          blah33<br />
          blah34<br />
          blah35<br />
          blah36<br />
          blah37<br />
          blah38<br />
          blah39<br />
          blah40<br />
          blah41<br />
          blah42<br />
          blah43<br />
          blah44<br />
          blah45<br />
          blah46<br />
          blah47<br />
          blah48<br />
          blah49<br />
          blah50<br />
          blah51<br />
          blah52<br />
          blah53<br />
          blah54<br />
          blah55<br />
          blah56<br />
          blah57<br />
          blah58<br />
          blah59<br />
          blah60<br />
          blah61<br />
          blah62<br />
          blah63<br />
          blah64<br />
          blah65<br />
          blah66<br />
          blah67<br />
          blah68<br />
          blah69<br />
  </div>
  <div class="site-footer">
    <div style="height: 40px;background-color:YellowGreen">My Footer Test </div>
  </div>
</div>

In the above snippet, the body scrolls quite well.

Now I'm attempting to Flex the Body into Row and create non-scrolling side-bars but keep a the center content scrolling. I have the following, but the content isn't scrolling. What am I missing?

html,body{
    overflow: hidden;
    width: 100%; height: 100%;
    max-height: 100%; max-width: 100%;
    margin: 0; padding: 0;
}

.site-container {
  height: 100%; width: 100%;
  display: flex;
  flex-direction: column;
}

.site-container .site-header,
.site-container .site-footer{
  flex: 0 0 auto;
  overflow: visible;
}

.site-container .site-body {
  position: relative;
  min-height: 0px;
  flex: 0 1 auto;
}

.body-container{
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: row;
}

.body-container .body-left,
.body-container .body-right{
  flex: 0 0 auto;
  overflow: visible;
}

.body-container .site-content{
  position: relative;
  overflow: auto;
  min-width: 0px;
  flex: 1 0 auto;
}
<div class="site-container">
  <div class="site-header">
    <div style="height: 40px;background-color:YellowGreen">My Header Test </div>
  </div>
  <div class="site-body">
    <div class="body-container">
      <div class="site-sidebar-left">
        <div style="background-color:lightgray;">
          left1<br />
          left2<br />
          left3<br />
          left4<br />
          left5<br />
          left6<br />
          left7<br />
          left8<br />
          left9<br />
          left10<br />
        </div>
      </div>
      <div class="site-content">
        blah1<br />
        blah2<br />
        blah3<br />
        blah4<br />
        blah5<br />
        blah6<br />
        blah7<br />
        blah8<br />
        blah9<br />
        blah10<br />
        blah11<br />
        blah12<br />
        blah13<br />
        blah14<br />
        blah15<br />
        blah16<br />
        blah17<br />
        blah18<br />
        blah19<br />
        blah20<br />
        blah21<br />
        blah22<br />
        blah23<br />
        blah24<br />
        blah25<br />
        blah26<br />
        blah27<br />
        blah28<br />
        blah29<br />
        blah30<br />
        blah31<br />
        blah32<br />
        blah33<br />
        blah34<br />
        blah35<br />
        blah36<br />
        blah37<br />
        blah38<br />
        blah39<br />
        blah40<br />
        blah41<br />
        blah42<br />
        blah43<br />
        blah44<br />
        blah45<br />
        blah46<br />
        blah47<br />
        blah48<br />
        blah49<br />
        blah50<br />
        blah51<br />
        blah52<br />
        blah53<br />
        blah54<br />
        blah55<br />
        blah56<br />
        blah57<br />
        blah58<br />
        blah59<br />
        blah60<br />
        blah61<br />
        blah62<br />
        blah63<br />
        blah64<br />
        blah65<br />
        blah66<br />
        blah67<br />
        blah68<br />
        blah69<br />
      </div>
      <div class="site-sidebar-right">
        <div style="background-color:lightgray;">
          right1<br />
          right2<br />
          right3<br />
          right4<br />
          right5<br />
          right6<br />
          right7<br />
          right8<br />
          right9<br />
          right10<br />
        </div>
      </div>
    </div>
  </div>
  <div class="site-footer">
    <div style="height: 40px;background-color:YellowGreen">My Footer Test </div>
  </div>
</div>

Eventually it would look like:

enter image description here

Erik Philips
  • 53,428
  • 11
  • 128
  • 150

1 Answers1

1

Unlike the site-header, which is a flex item of the site-container, the site-footer was nested inside the site-body. Either that was intentional or you were missing a closing div. For the purposes of this answer, I assumed the latter.

Now the site-header, site-body and site-footer are siblings.

Then I added overflow: auto and flex: 1 to .site-content. The first to enable scrollbars and the second to consume free space on the row.

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

.site-body {
  min-height: 0px;
  height: 100%;
}

.body-container {
  display: flex;
  height: 100%;
}

.site-content {
  flex: 1;
  overflow: auto;
}

body {
  margin: 0;
}
<div class="site-container">
  <div class="site-header">
    <div style="height: 40px;background-color:YellowGreen">My Header Test </div>
  </div>
  <div class="site-body">
    <div class="body-container">
      <div class="site-sidebar-left">
        <div style="background-color:lightgray;">
          left1
          <br /> left2
          <br /> left3
          <br /> left4
          <br /> left5
          <br /> left6
          <br /> left7
          <br /> left8
          <br /> left9
          <br /> left10
          <br />
        </div>
      </div>
      <div class="site-content">
        blah1
        <br /> blah2
        <br /> blah3
        <br /> blah4
        <br /> blah5
        <br /> blah6
        <br /> blah7
        <br /> blah8
        <br /> blah9
        <br /> blah10
        <br /> blah11
        <br /> blah12
        <br /> blah13
        <br /> blah14
        <br /> blah15
        <br /> blah16
        <br /> blah17
        <br /> blah18
        <br /> blah19
        <br /> blah20
        <br /> blah21
        <br /> blah22
        <br /> blah23
        <br /> blah24
        <br /> blah25
        <br /> blah26
        <br /> blah27
        <br /> blah28
        <br /> blah29
        <br /> blah30
        <br /> blah31
        <br /> blah32
        <br /> blah33
        <br /> blah34
        <br /> blah35
        <br /> blah36
        <br /> blah37
        <br /> blah38
        <br /> blah39
        <br /> blah40
        <br /> blah41
        <br /> blah42
        <br /> blah43
        <br /> blah44
        <br /> blah45
        <br /> blah46
        <br /> blah47
        <br /> blah48
        <br /> blah49
        <br /> blah50
        <br /> blah51
        <br /> blah52
        <br /> blah53
        <br /> blah54
        <br /> blah55
        <br /> blah56
        <br /> blah57
        <br /> blah58
        <br /> blah59
        <br /> blah60
        <br /> blah61
        <br /> blah62
        <br /> blah63
        <br /> blah64
        <br /> blah65
        <br /> blah66
        <br /> blah67
        <br /> blah68
        <br /> blah69
        <br />
      </div>
      <div class="site-sidebar-right">
        <div style="background-color:lightgray;">
          right1
          <br /> right2
          <br /> right3
          <br /> right4
          <br /> right5
          <br /> right6
          <br /> right7
          <br /> right8
          <br /> right9
          <br /> right10
          <br />
        </div>
      </div>
    </div>
  </div>
  <div class="site-footer">
    <div style="height: 40px;background-color:YellowGreen">My Footer Test </div>
  </div>
</div>

https://jsfiddle.net/9mqxytv4/2/

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    Correct, they should be siblings. Which fixes a lot of problems ugh, obviously my question looks a bit different with valid html. – Erik Philips Nov 21 '17 at 00:44
  • Why does changing the containers height from view-port height to 100% or using `max-height: 100%` break your answer? – Erik Philips Nov 21 '17 at 00:48
  • Working with percentage heights in CSS is tricky and messy. You need to make sure all parent elements have a defined height ([full explanation](https://stackoverflow.com/a/31728799/3597276)). And different browsers have different rules for rendering percentage heights, especially when dealing with flexbox ([full explanation](https://stackoverflow.com/q/33636796/3597276)). – Michael Benjamin Nov 21 '17 at 00:51
  • With [viewport percentage heights](https://stackoverflow.com/a/32174347/3597276) (`vh`) you can set the element's height and be done with it. It's just much simpler and easier and, therefore, much more efficient. – Michael Benjamin Nov 21 '17 at 00:52