ビューポートの1/3と2/3をそれぞれ占める2つのパネル（上部と下部）を備えたフレックスボックスベースのレイアウトがあります。（実際にはもっと多くのパネルがありますが、私はそれを最小限の例に蒸留しました）。
上部パネルもフレックスコンテナです。これは、子が上から下に流れ、余裕があるときに垂直方向の中央に配置されるようにするためです。トップパネルに収まるよりも多くのものがある場合は、スクロール可能にしたいので、overflow: auto。
問題：コンテンツは、をtop使用してもそのサイズに縮小されflex-shrink: 0、スクロールバーがポップアップしません。
content次のデモでは、高さが明示的に指定されている場合でも、がどのように縮小されるかを確認してください。
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.main {
display: flex;
height: 100%;
flex-direction: column;
}
.top {
display: flex;
flex-direction: column;
flex-basis: 33%;
border-bottom: 1px solid #ccc;
overflow: auto;
justify-content: center;
padding: 20px;
}
.bottom {
overflow: auto;
flex-basis: 67%;
}
.content {
height: 500px;
background-color: #eee;
}<div class="main">
<div class="top">
<div class="content">Content</div>
</div>
<div class="bottom"></div>
</div>質問：
レイアウト要件を維持しながらこれを修正するにはどうすればよいですか？display: flexトップパネルを無効にすると、デモで目的の効果が得られます。私は可能性の内容を配置topflexboxlessの方法で、私はフレックスレイアウトと自動垂直センタリングの利点を失います。
なぜこれが起こるのですか？CSS仕様への参照は大歓迎です。
あなたが書いた：
問題：コンテンツは、を
top使用してもそのサイズに縮小されflex-shrink: 0、スクロールバーがポップアップしません。
実際、解決策はflex-shrink: 0です。では、問題は、どこに適用したのかということです。
これを適用した場合は機能しませんtop–プライマリコンテナ内のフレックスアイテムflex-basis: 33%（つまり、height: 33%この場合）–の長さtopはパーセンテージであるため、そのため、パーセンテージの長さが親コンテナを基準にしているため、自然に縮小/拡大します。
あなたは適用する必要があるflex-shrink: 0に.content固定の高さ（とネストされたコンテナ内にフレックス項目- height: 500px/ flex-basis: 500px）。
したがって、これは機能します：
.content {
height: 500px;
flex-shrink: 0;
}
またはこれ：
.content {
flex-basis: 500px;
flex-shrink: 0;
}
または、さらに良いことに、これ：
.content {
flex: 0 0 500px; /* don't grow, don't shrink, stay fixed at 500px */
}
仕様から：
flexショートハンドは一般的な用途に対応するために不特定のコンポーネントを正しくリセットするため、作成者は、ロングハンドプロパティを直接使用するのではなく、ショートハンドを使用して柔軟性を制御することをお勧めします。
body {
margin: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
}
.top {
display: flex;
flex-direction: column;
flex-basis: 33%;
border-bottom: 1px solid #ccc;
overflow: auto;
justify-content: center;
padding: 20px;
}
.bottom {
overflow: auto;
flex-basis: 67%;
}
.content {
flex: 0 0 500px;
background-color: #eee;
}<div class="main">
<div class="top">
<div class="content">Content</div>
</div>
<div class="bottom"></div>
</div>次に、2つ目の問題があります。これは、top要素の上部が切り取られ、スクロールでアクセスできないことです。これはjustify-content: center、コンテナが原因です。
これは既知の問題です。これは、フレックスautoマージンを使用して解決されます。
したがって、これの代わりに：
.top {
display: flex;
flex-direction: column;
flex-basis: 33%;
border-bottom: 1px solid #ccc;
overflow: auto;
/* justify-content: center; <--- REMOVE */
padding: 20px;
}
これを行う：
.content {
flex: 0 0 500px;
margin: auto 0; /* top & bottom auto margins */
background-color: #eee;
}
body {
margin: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
}
.top {
display: flex;
flex-direction: column;
flex-basis: 33%;
border-bottom: 1px solid #ccc;
overflow: auto;
/* justify-content: center; USE AUTO MARGINS ON FLEX ITEM INSTEAD */
padding: 20px;
}
.bottom {
overflow: auto;
flex-basis: 67%;
}
.content {
flex: 0 0 500px;
margin: auto 0;
background-color: #eee;
}<div class="main">
<div class="top">
<div class="content">Content</div>
</div>
<div class="bottom"></div>
</div>完全な説明は次のとおりです。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加