子供は身長の高さを取るべきです。

Question

私はフレックスラッパーディープ、2人の子供、そして左の子供の内臓を持っています。

HTML

<div id="wrapper"> 
    <div id="left"> 
    <div id="inner-content"> 
    </div> 
    </div> 
    <div id="right"> 
    </div 
</div> 

CSS

#wrapper { 
    display: flex; 
    width: 400px; 
} 

#left { 
    background-color: red; 
    width: 40%; 
    min-height: 300px; 
} 

#inner-content { 
    background-color: rgba(255,255,255, .6); 
    height: 100%; 
    overflow: auto; 
} 

#right { 
    background-color: green; 
    width: 60%; 
} 

#leftの高さは常に、少なくとも300ピクセルである必要があります。 #rightのコンテンツが300ピクセルを超えて大きくなる場合は、#leftは#rightと等しいはずです。

＃inner-contentの高さは、常に最大で#leftである必要があります（したがって、300pxまたは#rightに等しい）。内容が大きい場合は、スクロールバーが表示されます。

親#leftには最小幅しかないので、現時点では＃内部コンテンツにはスクロールバーが表示されません。

動的高さ（#rightに依存）を#leftに与えることができますが、#inner-contentはコンテンツの高さではなくその高さにします。私も現時点でbinを作った。

Answer 1

このように、inner-content要素を絶対位置に配置することです。これを行うことで、身長に合わせてパーセントを使用する際に問題を解決します。通常、身長までの各親に設定する必要があります固定された高さの値を持つ最初の要素）

#wrapper { 
 
    display: flex; 
 
    width: 400px; 
 
} 
 
#left { 
 
    position: relative; 
 
    background-color: red; 
 
    width: 40%; 
 
    min-height: 300px; 
 
} 
 

 
#inner-content { 
 
    position: absolute; 
 
    left: 0; top: 0; right: 0; bottom: 0; 
 
    background-color: rgba(255,255,255, .6); 
 
    overflow: auto; 
 
} 
 

 
#right { 
 
    background-color: green; 
 
    width: 60%; 
 
}

<div id="wrapper"> 
 
    <div id="left"> 
 
    <div id="inner-content"> 
 
     Content<br><br><br> 
 
     Content<br><br><br> 
 
     Content<br><br><br> 
 
     Content<br><br><br> 
 
     Content<br><br><br> 
 
     Content<br><br><br> 
 
     Content<br><br><br> 
 
     Content<br><br><br> 
 
     Content<br><br><br> 
 
    </div> 
 
    </div> 
 
    <div id="right"> 
 
     Content<br><br><br> 
 
     Content<br><br><br> 
 
     Content<br><br><br> 
 
     Content<br><br><br> 
 
     Content<br><br><br> 
 
     Content<br><br><br> 
 
    </div> 
 
</div>

Answer 2

#wrapperにalign-items:stretch;を追加し、固定高さを#rightに削除してください。

次に、＃rightは常に#leftと同じ高さです。 要素に最小高さを設定する場合は、#wrapperに設定します。