Flexbox - заполнить оставшееся пространство

Question

У меня есть базовый макет flexbox, как это ..

body,html {
  height:100%;
  width:100%;

}

#container {
  width:100%;
  background:grey;
  display:flex;
  flex-direction:column;
}

.top {
  background:red;
  flex:1;
  padding:20px;
}

.bottom {
  background:yellow;
  flex:1;
  padding:20px;
}

<div id="container">
	<div class="top">
  Top Content
	</div>
	<div class="bottom">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis, arcu vitae sollicitudin pellentesque, quam libero imperdiet urna, eu rhoncus lorem dolor sed neque. Donec ex risus, pretium ut maximus fringilla, euismod id mi. Phasellus ligula sem, iaculis ut urna eget, efficitur vulputate sem.
  </div>
</div>

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

Является ли flexbox лучшим вариантом для использования в этой ситуации?

Answer 1

Во-первых, вам нужно, чтобы контейнер занимал вертикальное пространство.height: 100%; сделает это.

Во-вторых, если вы хотите, чтобы заголовок div , а не был того же размера, что и следующий div, они не должны быть оба flex: 1;, на самом делеВы, вероятно, хотите, чтобы заголовок был flex: 0;

Answer 2

Контейнер не установлен на 100% высоту.это не достаточно высокий.После того, как вы установили контейнер на height: 100%, вы также должны установить flex-basis для каждого элемента flex.Низ может быть flex: 1 1 auto, но верх должен быть flex: 0 1 auto

body,html {
  height:100%;
  width:100%;
  margin: 0;
}

#container {
  width:100%;
  height: 100%;
  background:grey;
  display:flex;
  flex-direction:column;
}

.top {
  background:red;
  flex:1 1 auto;
  padding:20px;
}

.bottom {
  background:yellow;
  flex:0 1 auto;
  padding:20px;
}

<div id="container">
	<div class="top">
  Top Content
	</div>
	<div class="bottom">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis, arcu vitae sollicitudin pellentesque, quam libero imperdiet urna, eu rhoncus lorem dolor sed neque. Donec ex risus, pretium ut maximus fringilla, euismod id mi. Phasellus ligula sem, iaculis ut urna eget, efficitur vulputate sem.
  </div>
</div>

Answer 3

Является ли flexbox лучшим вариантом для использования в этой ситуации?

Да, это хорошая идея - использовать flexbox в этой ситуации.

Для достижения ваших целейЖелаемый результат, как я понимаю, нужно установить height: 100% на #container, чтобы он занимал все доступное ему пространство.Затем установите flex-grow: 0 на .bottom, чтобы он не рос.

Таким образом, ваш CSS должен быть:

#container {
  width:100%;
  height:100%;
  background:grey;
  display:flex;
  flex-direction:column;
}

.top {
  background:red;
  flex: 1 0 auto; // Grow, don't shrink
  padding:20px;
}

.bottom {
  background:yellow;
  flex: 0 0 auto; // don't grow, take up only needed space
  padding:20px;
}