Сделайте div как можно больше в flexLayout

Question

#container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 200px;
  width: 100px;
  background-color: red;
}

#stack{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 200px;
}

.item {
  display: flex;
  height: 30px;
  width: 100px;
  background-color: green;
  flex-shrink: 0;
}

.spacer {
  display: flex;
  height: 200px;
  flex-shrink: 1000;
}

<div id="container">
  <div class="stack">
    <div class="item">a</div>
    <div class="spacer"></div>
    <div class="item">b</div>
  </div>
</div>

Как показано в коде выше, родительский элемент имеет max-height, поскольку его высота не определена. Я хочу, чтобы высота spacer была как можно больше. И что я ожидаю, это 160px в этой ситуации. Я пробовал flex-grow, но он не работает, так как контейнер не имеет height. Я пробовал flex-shrink и большой height, такой как код во фрагменте. Но я обнаружил, что иногда flex-shrink не работает, а иногда это выглядит страшно с очень большой высотой.

Answer 1

это не работает, потому что вы используете неправильный селектор для «стека» - это класс, а не id! Это должно работать: https://jsfiddle.net/bL5w81d4/1/

#container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 200px;
  width: 100px;
  background-color: red;
}

.stack{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 200px;
}

.item {
  display: flex;
  height: 30px;
  width: 100px;
  background-color: green;
  flex-shrink: 0;
}

.spacer {
  display: flex;
  height: 200px;
  flex-shrink: 1000;
}