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

Ответы на вопрос(3)

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

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

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

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

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

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

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

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

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

#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/

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

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

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

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

ВАШ ОТВЕТ НА ВОПРОС