Как установить высоту контейнера flexbox, чтобы он использовал «оставшееся пространство» ⇐ CSS

[Anonymous]

Я изо всех сил пытаюсь понять, как контейнеры flexbox взаимодействуют с другими блоками. Имея на своей странице всего лишь флексбокс, я могу делать то, что хочу. Но когда я добавляю другие элементы страницы, все становится странно. Проблема, похоже, в распределении пространства.

Похоже, моему контейнеру flexbox требуется явная высота. Если я не укажу это, я не получу поведение переноса. Я не уверен, как указать высоту контейнера флексбокса.

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

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

Я могу заставить его работать, нажав на инструкции внутри контейнера flexbox. Но тогда у него не будет 100% так, как я хочу, он будет путаться с моими кнопками.




* {
margin: 0;
padding: 0;
border: 1px solid #A00;
}
.instructions {
height: 100px;
background: linear-gradient(to bottom, #ffffff 0%, #999 100%);
}
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 80%;
}
.button {
width: 200px;
height: 50px;
margin: 10px;
background: linear-gradient(to bottom, #ffffff 0%, #BBB 100%);
border: 1px solid #CCC;
text-align: center;
}



Instructions go here.

This is Button 1
Thar be Button 2
Yarr, button 3
Hey that is a nice looking button.
Click Me!





Подробнее здесь: https://stackoverflow.com/questions/428 ... ning-space