Как я могу объединить flexbox и вертикальную прокрутку в полноразмерном приложении?

Я хочу использовать полноразмерное приложение с помощью flexbox. Я нашел то, что хочу, используя старый модуль макета flexbox ( display: box;и другие вещи) по этой ссылке: CSS3 Flexbox full-height app and overflow

Это правильное решение для браузеров, которые поддерживают только старую версию свойств CSS flexbox.

Если я хочу попробовать использовать новые свойства flexbox, я попытаюсь использовать второе решение по той же ссылке, указанной как хакерский: использование контейнера с height: 0px;. Это заставляет показывать вертикальную прокрутку.

Мне это не очень нравится, потому что это вызывает другие проблемы, и это скорее обходной путь, чем решение.

html, body {
    height: 100%;    
}
#container {
	display: flex;
	flex-direction: column;
	height: 100%;
}
#container article {
	flex: 1 1 auto;
	overflow-y: scroll;
}
#container header {
    background-color: gray;
}
#container footer {
    background-color: gray;
}

<section id="container" >
    <header id="header" >This is a header</header>
    <article id="content" >
        This is the content that
        <br />
        With a lot of lines.
        <br />
        With a lot of lines.
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
    </article>
    <footer id="footer" >This is a footer</footer>
</section>

Я также подготовил JSFiddle с базовым примером: http://jsfiddle.net/ch7n6/

Это полноразмерный HTML-сайт, и нижний колонтитул находится внизу из-за свойств flexbox элемента содержимого. Я предлагаю вам перемещать полосу между кодом CSS и результатом, чтобы имитировать разную высоту.

Благодаря https://stackoverflow.com/users/1652962/cimmanon, который дал мне ответ.

Решением является установка высоты вертикального прокручиваемого элемента. Например:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

Элемент будет иметь высоту, потому что flexbox пересчитывает его, если вам не нужна минимальная высота, поэтому вы можете использовать height: 100px;ее точно так же, как:min-height: 100px;

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 100px; /* == min-height: 100px*/
}

Итак, лучшее решение, если вам нужна min-heightвертикальная прокрутка:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

Если вам просто нужна полная вертикальная прокрутка на случай, если для просмотра статьи недостаточно места:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

Окончательный код: http://jsfiddle.net/ch7n6/867/

Редактор спецификаций Flexbox здесь.

Это рекомендуемое использование flexbox, но есть несколько вещей, которые вы должны настроить для наилучшего поведения.

• Не используйте префиксы. Flexbox без префикса хорошо поддерживается большинством браузеров. Всегда начинайте с без префикса и добавляйте префиксы только в случае необходимости для его поддержки.

• Поскольку ваш верхний и нижний колонтитулы не предназначены для гибкости, они оба должны быть flex: none;установлены на них. Прямо сейчас у вас есть похожее поведение из-за некоторых перекрывающихся эффектов, но вы не должны полагаться на это, если вы не хотите случайно запутать себя позже. (По умолчанию flex:0 1 auto, они начинаются с их автоматической высоты и могут сжиматься, но не увеличиваться, но они также overflow:visibleпо умолчанию, что запускает их значение min-height:autoпо умолчанию, чтобы предотвратить их полное сокращение. Если вы когда-либо установите для overflowних, поведение min-height:autoизменений (переключение на ноль, а не на минимальное содержание), и они внезапно будут раздавлены сверхвысоким <article>элементом.)

• Вы <article> flexтоже можете упростить - просто установите, flex: 1;и все будет хорошо. Старайтесь придерживаться общих ценностей в https://drafts.csswg.org/css-flexbox/#flex-common, если у вас нет веской причины сделать что-то более сложное - их легче читать и они охватывают большинство вариантов поведения. вы захотите вызвать.

Текущая спецификация говорит это относительно flex: 1 1 auto:

Изменяет размер элемента на основе свойств width/ height, но делает их полностью гибкими, чтобы они занимали все свободное пространство вдоль главной оси. Если все элементы либо flex: auto, flex: initialили flex: none, любое положительное свободное пространство после пунктов были размерных будут распределены равномерно по пунктам , с flex: auto.

http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common

Мне кажется, что если вы говорите, что высота элемента составляет 100 пикселей, это больше похоже на «предлагаемый» размер, а не на абсолютный. Поскольку ему позволяют сжиматься и расти, он занимает столько места, сколько ему позволено. Вот почему добавление этой строки к вашему «основному» элементу работает: height: 0(или любое другое небольшое число).