Flex box не растягивается

Question

В настоящее время я делаю кое-что с Flex Box, и я бы хотел, чтобы мой flex box растягивался, но я не могу этого сделать Вот мой кодовый блок: https://codepen.io/chevalierv/pen/bGdBKyg

  .FlexContainer {
      height: 65vh;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
      align-content: stretch;
      justify-content: center;
      padding: 1em;
      background-color: red;
  }

.SecondChildContainer {
    align-self: flex-end;
    order: 2;
    flex: 1;
    flex-basis: 100%;
    background-color: green;
}

.FirstChildContainer {
    order: 1;
    flex-grow: 5;
    align-self: stretch;
    background-color: blue;
}

<div class="FlexContainer">
  <div class="FirstChildContainer">
    a
  </div>
  <div class="SecondChildContainer">
    a
  </div>
</div>

Answer 1

Я немного почистил ваш css и заставил его работать. См. Jsfiddle ниже:

https://jsfiddle.net/gqptemhu/

По сути, ваш флекс-контейнер нуждается в

.FlexContainer {
      height: 65vh;
      display: flex;
      flex-direction: column;
  }

, поэтому он знает, как складывать предметы по вертикали.

И вы используете

 flex: 0 1;
 flex: 1 0;

На элементах внутри гибкого контейнера, чтобы сказать, какой элемент вырастет, а какой уменьшится. Первое число соответствует flex-grow, а второе - flex-shrink. Они оба являются относительными числами, которые показывают, в каком процентном отношении места предметы будут расти / уменьшаться

Подробнее о flexbox и его использовании вы можете узнать по ссылке ниже:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/