ul-li-list-scroll

index.html

<div class="full-screen">
  <div class="header">Header</div>
  <div class="main">
    <div class="left">Menu-stuff here. No way this will fit.
      <ul>
        <li>Menu Entry</li>
        <li>Menu Entry</li>
        <li>Menu Entry</li>
        <li>Menu Entry</li>
        <li>Menu Entry</li>
        <li>Menu Entry</li>
        <li>Menu Entry</li>
        <li>Menu Entry</li>
        <li>Menu Entry</li>
        <li>Menu Entry</li>
        <li>Menu Entry</li>
        <li>Menu Entry</li>
        <li>Menu Entry</li>
        <li>Menu Entry</li>
        <li>Menu Entry</li>
        <li>Menu Entry</li>
        <li>Menu Entry</li>
      </ul>
    </div>
    <div class="middle">Large stuff here</div>
    <div class="right">Another sidebar</div>
  </div>
  <div class="footer">Footer  </div>
</div>

style.css

.flex-container {
  display: flex;
  overflow: hidden;
}
.flex-container > * {
  flex: 0 0 auto;
  overflow: scroll;
}
.stretchy {
  flex: 1 1 auto;
}
.column {
  flex-direction: column;
}
html,
body,
.full-screen {
  height: 100%;
}
body {
  margin: 0;
}
.full-screen {
  display: flex;
  overflow: hidden;
  flex-direction: column;
}
.full-screen > * {
  flex: 0 0 auto;
  overflow: scroll;
}
.full-screen > .header,
.full-screen > .footer {
  height: 50px;
  background: #555;
  color: white;
}
.full-screen > .main {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
}
.full-screen > .main > * {
  flex: 0 0 auto;
  overflow: scroll;
}
.full-screen > .main > .left,
.full-screen > .main > .right {
  width: 200px;
  background: #eee;
}
.full-screen > .main > .middle {
  flex: 1 1 auto;
}

ul-li-list-scroll.markdown

ul-li-list-scroll

A Pen by uyriq on CodePen.

License.