Flexbox и вертикальная прокрутка в приложении полной высоты с использованием NEWER Flexbox API

Question

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

Это правильное решение для старой версии свойств flexbox css.

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

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

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

#container {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    height: 100%;
}
#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: scroll;
}

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

Answer 1

Спасибо cimmanon который дал мне ответ.

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

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

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

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

Так что лучшее решение, если вы хотите минимальную высоту в вертикальной прокрутке:

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

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

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

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

Answer 2

Редактор спецификаций 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/, если у вас нет веских причин делать что-то более сложное - их легче читать и охватывать большинство вариантов поведения. Вы хотите призвать.

Answer 3

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

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

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

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