子供を伸ばして交差軸を埋めるには？

141

左右のフレックスボックスがあります：

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 70vh;
  min-height: 325px; 
  max-height:570px; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

スニペットを展開

問題は、適切な子供が反応しにくいことです。具体的には、ラッパーの高さいっぱいにしたい。

これを達成する方法？

css flexbox

— デボラコール
ソース

それはラッパーの高さを埋めます！ChromeとFirefoxでテストしましたが、問題はありませんでした。コードを単純化しすぎたのかもしれません。これをテストするにはbackground-color、子供向けに設定align-items: centerするか、ラッパーで設定します。

— samad montazeri 2015

ええ、何らかの理由でラッパーの高さがサファリに入力されていません... chromeとfirefoxは、height： '100％' in the children

— Pencilcheck

175

行フレックスボックスコンテナーの子は、コンテナーの垂直方向のスペースを自動的に埋めます。
flex: 1;残りの水平スペースを埋めるようにする場合は、子を指定します。

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
  flex: 1; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

スニペットを展開

flex: 1;等しい量の水平スペースを埋める場合は、両方の子に指定します。

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > div 
{
  flex: 1; 
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

スニペットを展開

— アレックス・シェステロフ
ソース

flex短縮形プロパティであるflex-grow、flex-shrinkとflex-basis。flex: 1;と同等flex-grow: 1;です。

— Rory O'Kane 2017年

align-items: stretch;必要ないようです

— マット