Oto kod, którego używam do osiągnięcia powyższego układu:

.header {
  height: 50px;
}

.body {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
}

.sidebar {
  width: 140px;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  display: flex;
}

.column {
  padding: 20px;
  border-right: 1px solid #999;
}

<div class="header">Main header</div>
<div class="body">
  <div class="sidebar">Sidebar</div>

  <div class="main">
    <div class="page-header">Page Header. Content columns are below.</div>
    <div class="content">
      <div class="column">Column 1</div>
      <div class="column">Column 1</div>
      <div class="column">Column 1</div>
    </div>
  </div>
</div>

Pominąłem kod używany do stylizacji. Wszystko można zobaczyć w wstrzykiwaczu .

Powyższe działa, ale gdy zawartość content jest przepełniona, powoduje to przewinięcie całej strony. Chcę tylko przewijać sam obszar zawartości, więc dodałem overflow: auto do content div.

Problem z tym polega teraz na tym, że same kolumny nie wykraczają poza ich rodziców wysokość, więc granice są odcięte tam też.

Oto długopis pokazujący problem z przewijaniem .

Jak ustawić obszar content, aby przewijał się niezależnie, a jego dzieci rozciągały się poza wysokość content?