CODEWITHSUNDEEP
csslayoutflexbox
Siyfion
Siyfion

Reputation: 979

How to create a scrollable content section in flexbox?

Okay, so I want a simple (or so I thought) layout where the application has a header and a footer "stuck" to the top and bottom of the window respectively with content in the middle. That's fine, I can get that working.

Next, I want the content itself to have a header and footer, with an internal content section that fills the remaining space and if it overflows, is scrollable.

I've created a mockup of what I've done so far, showing my issues:

.application-body {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100vh;
}

.application-header {
  background-color: #FFDDFF;
  -webkit-flex: 0 0 45px;
  -moz-flex: 0 0 45px;
  -ms-flex: 0 0 45px;
  flex: 0 0 45px;
}

.application-content {
  background-color: #DDFFFF;
  -webkit-flex: 1 1;
  -moz-flex: 1 1;
  -ms-flex: 1 1;
  flex: 1 1;
  padding-left: 15px;
  padding-right: 15px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.application-footer {
   background-color: #FFFFDD;
  -webkit-flex: 0 0 45px;
  -moz-flex: 0 0 45px;
  -ms-flex: 0 0 45px;
  flex: 0 0 45px;
}

.content-header {
   background-color: #FFFF22;
  -webkit-flex: 0 0 25px;
  -moz-flex: 0 0 25px;
  -ms-flex: 0 0 25px;
  flex: 0 0 25px;
}

.content {
  background-color: #22FFFF;
  -webkit-flex: 0 0 100%;
  -moz-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
}

.content-footer {
   background-color: #FF22FF;
  -webkit-flex: 0 0 25px;
  -moz-flex: 0 0 25px;
  -ms-flex: 0 0 25px;
  flex: 0 0 25px;
}
<div class="application-body">
    <div class="application-header">
      APP HEADER
    </div>
    <div class="application-content">
      <div class="content-header">
        CONTENT HEADER
      </div>
      <div class="content">
        CONTENT
        <ul>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Aliquam tincidunt mauris eu risus.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
        </ul>  
      </div>
      <div class="content-footer">
        CONTENT FOOTER
      </div>
    </div>
    <div class="application-footer">
      © All rights reserved by TEST Ltd. 2015
    </div>
  </div>

Upvotes: 1

Views: 81

Answers (1)

Oriol
Oriol

Reputation: 288290

I think you want

.application-content, .content {
  overflow: auto; /* Enable scrollbars if necessary */
  flex: 1 1;      /* Fill available space (don't use 100%) */
}


.application-body {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100vh;
}

.application-header {
  background-color: #FFDDFF;
  -webkit-flex: 0 0 45px;
  -moz-flex: 0 0 45px;
  -ms-flex: 0 0 45px;
  flex: 0 0 45px;
}

.application-content {
  background-color: #DDFFFF;
  -webkit-flex: 1 1;
  -moz-flex: 1 1;
  -ms-flex: 1 1;
  flex: 1 1;
  padding-left: 15px;
  padding-right: 15px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.application-footer {
   background-color: #FFFFDD;
  -webkit-flex: 0 0 45px;
  -moz-flex: 0 0 45px;
  -ms-flex: 0 0 45px;
  flex: 0 0 45px;
}

.content-header {
   background-color: #FFFF22;
  -webkit-flex: 0 0 25px;
  -moz-flex: 0 0 25px;
  -ms-flex: 0 0 25px;
  flex: 0 0 25px;
}

.content {
  background-color: #22FFFF;
  -webkit-flex: 0 0 100%;
  -moz-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
}
.content-footer {
   background-color: #FF22FF;
  -webkit-flex: 0 0 25px;
  -moz-flex: 0 0 25px;
  -ms-flex: 0 0 25px;
  flex: 0 0 25px;
}
.application-content, .content {
  overflow: auto;
  flex: 1 1;
}
<div class="application-body">
    <div class="application-header">
      APP HEADER
    </div>
    <div class="application-content">
      <div class="content-header">
        CONTENT HEADER
      </div>
      <div class="content">
        CONTENT
        <ul>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Aliquam tincidunt mauris eu risus.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
        </ul>  
      </div>
      <div class="content-footer">
        CONTENT FOOTER
      </div>
    </div>
    <div class="application-footer">
      © All rights reserved by TEST Ltd. 2015
    </div>
  </div>

Upvotes: 4

Related Questions