0
フレックスで以下のレイアウトを表示しようとしています。コンテナの高さに合わせてフレックスアイテムの高さを縮小する方法
Iは同じ幅と高さのdivを有します。私は以下のレイアウトを達成したい。 1つのアイテムを左側に配置し、残りの4つを右側のコンテナに合わせ、プロセスの同じコンテナの高さを維持します。左側の高さと幅を埋めるために左側のものが増え、4つのアイテム間でコンテナのもう一方の正しいサイズが共有されます。私は左に右に1つの項目に、容器内に4 expecting.withたものに私のレイアウトが表示近い
.trades {
display: flex;
flex: 1;
}
.trade-panel {
flex: 1;
}
.layout-5-2 {
-ms-flex-direction: row;
flex-direction: row;
justify-content: space-between;
display: flex;
}
.layout-container-5-2-1 {
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
justify-content: space-between;
flex: 0 0 48%;
display: flex;
}
.layout-container-5-2-2 {
flex: 0 0 48%;
display: flex;
flex-direction: column;
}
<div class="trades">
<div class="layout-5-2">
<div class="layout-container-5-2-1">
<div class="trade-panel">item 1</div>
<div class=" trade-panel">item 2</div>
<div class="trade-panel">item 3</div>
<div class=" trade-panel">item 4</div>
</div>
<div class="layout-container-5-2-1">
<div class="trade-panel">vertical item.</div>
</div>
</div>
</div>
。ただし、取引コンテナは、4つの取引高に対応するように垂直方向にスクロールします。取引は、右の容器thats .layout-container 5-2-2
に収まるように収縮しません。どうすれば容器の高さを修正するために4つを縮めるのですか?どんな助けもありがとう。
感謝を試してみてください。私の問題は「左」であり、ボックスは等しい高さとサイズのボックス/アイテムです。したがって、「右」の4つのアイテムは、そこではコンテナの高さを超えて高さを拡大し、垂直スクロールを引き起こします。レイアウトは問題ありません。しかし、項目は適合しません。 –
'right'divの1つのボックスにコンテンツを追加すると、' left' divはその高さと一致するため、高さはhttps://jsfiddle.net/Lg0wyt9u/659/または複数のボックスhttps:// jsfiddle.net/Lg0wyt9u/660/ –
高さは一致しますが、縦スクロールは一致します。アイテムを左に縮小してコンテナに収める方法を探しています。それにもかかわらず、上記のコードをお寄せいただきありがとうございます。 –