Flexbox - не переполняйте контейнер вертикально

Я в основном получаю flexbox, но, похоже, у меня отсутствует концепция. То, что я хочу что-то вроде этогоFlexbox - не переполняйте контейнер вертикально

Blocks stacking out sideways

В принципе я не хочу, чтобы страница переполнения по вертикали и все эти красные блоки укладывают вертикально и горизонтально завернуть - перелив и прокрутку экрана по горизонтали, если это необходимо, но никогда не вертикально.

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

This is the jsbin template for what I'm doing. Я могу установить body: 100vh, но затем переполнение содержимого тела растягивается вниз, и я не знаю, как установить основную высоту, как я указал выше.

источник

2015-10-06 George Mauer

Попробуйте удалить 'Flex-направление: колонка;' 'из div.container' – Stickers

@Pangloss, который заставит штабелировать горизонтально и обертывать вертикально. Я специально хочу обратное. Если бы я сделал это, не только все блоки были в неправильном порядке, но если бы они переполнили экран, он выталкивал бы вертикально, ** не ** по горизонтали. –

Хорошо, все еще не понимаю вопрос полностью, но как насчет этого? http://jsfiddle.net/bez1a3L0/ – Stickers

<body> и <html> теги по умолчанию имеют размер как высокое, так и высокое. Поэтому, чтобы сгибать вертикально от верхней части окна просмотра до нижней части, вам необходимо установить их как height: 100%.

Кроме того, вы обнаружили ошибку реализации с помощью flexbox. Следующий код работает как ожидается в Safari, но в Chrome и Firefox.

UPDATE: Как описано Даниэлем Холберт здесь: https://bugzilla.mozilla.org/show_bug.cgi?id=1212058 Такое поведение на самом деле связано с вновь внедренной min-height: auto поведения. Код ниже обновлен, чтобы корректно работать во всех браузерах, поддерживающих современный flexbox.

* { margin:0; padding:0 } 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
nav { 
 
    background-color: blue; 
 
    margin: 5px 
 
} 
 

 
nav.top { 
 
    width: 100%; 
 
    height: 50px; 
 
    display: block; 
 
    flex: none; 
 
} 
 

 
div.main { 
 
    display: flex; 
 
    flex: 1; 
 
} 
 

 
nav.side { 
 
    width: 70px; 
 
    height: 400px; 
 
    flex: none; 
 
} 
 

 
main { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
    min-height: 0; 
 
} 
 

 
div.container { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    align-content: flex-start; 
 
    min-height: 0; 
 
} 
 

 
section { 
 
    width: 200px; 
 
    height: 250px; 
 
    background-color: red; 
 
    margin: 5px; 
 
} 
 

 

 

 
aside { 
 
    outline: 1px solid darkgreen; 
 
    flex: none; 
 
    height: 50px; 
 
    background: purple; 
 
}

<body> 
 
    <nav class="top"></nav> 
 
    <div class="main"> 
 
     <nav class="side"></nav> 
 
     <main> 
 
      <div class="container"> 
 
       <section></section> 
 
       <section></section> 
 
       <section></section> 
 
       <section></section> 
 
       <section></section> 
 
      </div> \t 
 
      <aside> 
 
       <button>Cancel</button> 
 
       <button>Save</button> 
 
      </aside> 
 
     </main> 
 
    </div> 
 
</body>

ПРИМЕЧАНИЕ: Для того, чтобы увидеть столбец оберточной вы хотите нажать кнопку «Полная страница» в сниппета

источник

2015-10-06 18:02:50 Zaqx

, сын ... работает в IE тоже за то, что стоит. Что конкретно здесь плохо? –

@GeorgeMauer не хотите красных блоков обернуть? но я их не вижу. – Stickers

@Pangloss посмотреть на него в IE или (я предполагаю) Safari. –

Flexbox - не переполняйте контейнер вертикально

ответ

Смежные вопросы