Запобігайте розширенню висоти гнучких предметів відповідно до інших гнучких елементів

У мене є два елементи всередині контейнера, які розташовані поруч за допомогою гнучкого вікна. Для другого елемента ( .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>

Це старе рішення. Мою відповідь замінює ця нова відповідь Аарона за допомогоюalign-self . Це краще рішення, яке не покладається на химерність CSS.

Поки гнучкий контейнер не має самої висоти , ви можете встановити 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>

Я знаю, що це старе питання, але кращим рішенням є встановлення елемента 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>

Ви можете легко це виправити, додавши до батьківських елементів вирівнювання: flex-start;

Це все

Налаштування 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>