Вот код, который я использую для достижения вышеуказанного макета:
.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>Я опустил код, используемый для стилизации. Вы можете увидеть все это в ручке .
Вышеописанное работает, но когда contentсодержимое области переполняется, происходит прокрутка всей страницы. Я хочу, чтобы прокручивалась только сама область контента, поэтому я добавил overflow: autoв contentdiv .
Проблема с этим теперь в том, что сами столбцы не выходят за пределы родительской высоты, поэтому границы там тоже обрезаются.
Вот ручка, показывающая проблему с прокруткой .
Как я могу настроить contentобласть для прокрутки независимо, в то время как ее дочерние элементы выходят за пределы contentрамки?
css
layout
multiple-columns
flexbox
Джозеф Силбер
источник
источник
Я просто очень элегантно решил эту проблему после долгих проб и ошибок.
Проверьте мой блог: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout
По сути, чтобы сделать прокручиваемую ячейку flexbox, вы должны сделать все ее родительские элементы
overflow: hidden;, или она просто проигнорирует ваши настройки переполнения и вместо этого увеличит родительский элемент.источник
Работаем
position:absolute;вместе сflex:Поместите гибкий элемент с помощью
position: relative. Затем внутри него добавьте еще один<div>элемент с:Это расширяет элемент до границ его родителя с относительным положением, но не позволяет расширять его. Внутри
overflow: auto;потом будет работать как положено.Удачи...
источник
box-sizing: border-boxвместо этого, но это может быть более сложным для некоторых сторонних элементов управления).Немного поздно, но это может помочь: 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:
Работал на меня. Надеюсь, поможет
источник
Добавь это:
к правилу для
.content {}. Это исправляет это в вашей ручке для меня, по крайней мере (как в Firefox, так и в Chrome).По умолчанию
.contentимеетalign-items: stretch, что делает его размер всех дочерних элементов авто-высоты, чтобы соответствовать его собственному росту, в соответствии с http://dev.w3.org/csswg/css-flexbox/#algo-stretch . Напротив, значениеflex-startпозволяет дочерним элементам вычислять свои собственные высоты и выравнивать их по начальному краю (и переполнять, и запускать полосу прокрутки).источник
Одна проблема, с которой я столкнулся, заключается в том, что для наличия полосы прокрутки элементу необходимо указать высоту (а не%).
Хитрость заключается в том, чтобы вкладывать другой набор элементов div в каждый столбец и настраивать отображение родительского элемента столбца на flex-direction: column.
И вот HTML:
https://jsfiddle.net/LiamFlavelle/czpjdfr4/
источник
Решением этой проблемы является просто добавление
overflow: auto;в .content для прокрутки оболочки содержимого.Кроме того, существуют обстоятельства, возникающие вместе с оболочкой Flexbox и
overflowedпрокручиваемым контентом, например, эта кодовая ручка .Решение состоит в том, чтобы добавить
overflow: hidden (or auto);к родительскому элементу обертки (устанавливается с помощью overflow: auto;) вокруг большого содержимого.источник