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

Я хочу использовать полноразмерное приложение, используя 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 web-страница полной высоты", а нижний колонтитул внизу, из-за flexbox элемента контента. Я предлагаю вам переместить панель между кодом css и результатом, чтобы имитировать разную высоту.

Ответы

Ответ 1

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

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

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

Элемент будет иметь высоту, потому что flexbox пересчитывает его, если вы не хотите минимальную высоту, чтобы вы могли использовать высоту: 100 пикселей; что он точно такой же: 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/

Ответ 2

Flexbox здесь.

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

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

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

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

Ответ 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/#flex-common

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