Як я можу поєднати флексбокс і вертикальну прокрутку в програмі на всю висоту?

Я хочу використовувати повнорозмірний додаток за допомогою 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(або будь-яке інше невелике число).