Предотвращение расширения высоты гибких элементов для соответствия другим элементам гибкости

У меня есть два элемента внутри контейнера, которые бок о бок, используя гибкую коробку. На втором элементе (.flexbox-2) я устанавливаю его высоту в CSS. Однако тогда первый элемент (.flexbox-1) будет соответствовать высоте .flexbox-2. Как остановить .flexbox-1 от соответствия высоте .flexbox-2, а вместо этого сохранить естественную высоту?

Вот что я до сих пор (также доступен как jsFiddle)

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
}
.flexbox-2 {
  -webkit-flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

Ответы

Ответ 1

Это старое решение.Мой ответ заменен новым новым ответом Аарона с помощью align-self. Это лучшее решение, которое не полагается на причуду CSS.

Пока контейнер flex не имеет самой высоты, вы можете установить height: 0% в первый элемент гибкости. Поскольку у него нет высоты, чтобы наследовать от его родителя, любая процентная высота приведет к его краху. Он будет расти вместе с его содержимым.

Пример

В этом примере я удалил префикс -webkit. Это действительно необходимо для Safari, и префикс может быть добавлен над версией, отличной от префикса. Я также удалил flex-direction: row, поскольку это значение по умолчанию.

.container {
  display: flex;
}
.flexbox-1 {
  flex: 1;  
  height: 0%;  
  border: solid 3px red;
}
.flexbox-2 {
  flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

Ответ 2

Я знаю, что это старый вопрос, но лучшим решением является установка элемента flex для выравнивания в верхней части с помощью flex-start.

/* Default Styles */
.container {
  display: flex;
}
.flexbox-2 {
  flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}
 .flexbox-1 {
  flex: 1;  
  align-self: flex-start;  
  border: solid 3px red;
}

<div class="container">
  <div class="flexbox-1">"align-self: flex-start;"</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

Ответ 3

Установка height детей на max-content предотвратит их сокращение.

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
  height: max-content;
}
.flexbox-2 {
  -webkit-flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>