Прокрутка flexbox с переполненным контентом

enter image description here

Здесь код, который я использую для достижения вышеуказанной компоновки:

.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>

Ответы

Ответ 1

Я говорил с Tab Atkins (автор спецификации flexbox) об этом, и это то, что мы придумали:

HTML:

<div class="content">
    <div class="box">
        <div class="column">Column 1</div>
        <div class="column">Column 1</div>
        <div class="column">Column 1</div>
    </div>
</div>

CSS

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

.box {
    min-height: min-content; /* needs vendor prefixes */
    display: flex;
}

Вот ручки:

Причина этого в том, что align-items: stretch не сжимает свои элементы, если они имеют внутреннюю высоту, которая выполняется здесь min-content.

Ответ 2

Я просто решил эту проблему очень элегантно после большого количества проб и ошибок.

Отправляй сообщение в своем блоге: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout

В принципе, чтобы прокручивать ячейку flexbox, вы должны сделать все ее родители overflow: hidden;, иначе она просто проигнорирует ваши настройки переполнения и сделает вместо этого родителя.

Ответ 3

Работа с position:absolute; вместе с flex:

Поместите гибкий элемент в position: relative. Затем внутри него добавьте еще один элемент <div> с:

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

Это расширяет элемент до границ его родителя с относительным положением, но не позволяет расширять его. Внутри, overflow: auto; будет работать как положено.

Удачи...

Ответ 4

Немного поздно, но это может помочь: http://webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269

В основном вам нужно поместить html, body в height: 100%; и обернуть весь ваш контент в <div class="wrap"> <!-- content --> </div>

CSS

html, body {
  height: 100%;
}

.wrap {
  height: 100vh;
  display: flex;
}

Работал для меня. Надеюсь, что это поможет.

Ответ 5

Добавь это:

align-items: flex-start;

к правилу для .content {}. Это исправляет это в вашей ручке для меня, по крайней мере (как в Firefox, так и в Chrome).

По умолчанию .content имеет align-items: stretch, что позволяет ему .content размер всех .content align-items: stretch авто-высоты в соответствии с его собственной высотой в соответствии с http://dev.w3.org/csswg/css-flexbox/#algo-stretch, Напротив, значение flex-start позволяет дочерним элементам вычислять их собственные высоты и выравнивать их по начальному краю (и переполнять, и запускать полосу прокрутки).