フレックスアイテムの高さが他のフレックスアイテムと一致するように拡大するのを防ぎます

Question 1

コンテナ内に2つの要素があり、フレックスボックスを使用して並べています。2番目の要素（.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>

スニペットを展開

Question 2

これは古い解決策です。 私の答えは、アーロンが使用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>

スニペットを展開

Question 3

これは古い質問ですが、より良い解決策は、を使用してフレックスアイテムを上部に揃えるように設定すること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>

スニペットを展開

Question 4

親にalign-itemsを追加することで、これを簡単に修正できます。flex-start;

それで全部です

Question 5

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>

スニペットを展開