残りのスペースにアイテムをフレックスさせないのはなぜですか？

Question

私はフレキシボックス

jsFiddle使用して要素を揃えるためにしようとしている

：あなたのようhttps://jsfiddle.net/x6m7qnyp/

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.left { 
 
    flex: 15%; 
 
    background-color: rgb(255, 0, 0); 
 
    height: 150px; 
 
} 
 

 
.rightTop { 
 
    flex: 85%; 
 
    background-color: rgb(0, 255, 0); 
 
    align-self: flex-start; 
 
} 
 

 
.rightBottom { 
 
    flex: 85%; 
 
    background-color: rgb(0, 0, 255); 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    LEFT 
 
    </div> 
 
    <div class="rightTop">RIGHT TOP</div> 
 
    <div class="rightBottom">RIGHT BOTTOM</div> 
 
</div>

あなたが見ることができますが、最後の要素もIかかわら.LEFTのdivの下にダウンしましたフレックスを85％に設定します。

私がしたいのは、右下の要素が右上の要素の下の残りの領域を埋めるようにすることです。それは次のようになります。

私はコンテナで右上と右下の要素をラップすることによって、これを達成できることを知っているが、私はこれを行う方法があるかどうかを知りたいです現在のマークアップ。 また、残りのスペースを埋めるのではなく、右下の要素が下に移動する理由を説明してください。

Answer 1

コンテナ内の右上の上部と下部のdivを囲みます。

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.left { 
 
    flex: 15%; 
 
    background-color: rgb(255, 0, 0); 
 
width:15px; 
 
    flex-grow:0; 
 
} 
 

 
.rightTop { 
 
    background-color: rgb(0, 255, 0); 
 
    align-self: flex-start; 
 
} 
 

 
.rightBottom { 
 
    background-color: rgb(0, 0, 255); 
 
    height: 100px; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    LEFT 
 
    </div> 
 
    <div> 
 
    <div class="rightTop">RIGHT TOP</div> 
 
    <div class="rightBottom">RIGHT BOTTOM 
 
    </div> 
 
</div> 
 
</div>

Answer 2

私はねえ、私はちょうどと呼ばれるそれ自身の容器に右サイドを包むでしょうflexcolumn

.flex { 
 
    display: flex; 
 
} 
 

 
.left { 
 
    flex-basis: 15%; 
 
    background-color: rgb(255, 0, 0); 
 
    height: 150px; 
 
} 
 

 
.right { 
 
    flex-grow: 1; 
 
    flex-direction: column; 
 
} 
 

 
.rightTop { 
 
    background-color: rgb(0, 255, 0); 
 
} 
 

 
.rightBottom { 
 
    background-color: rgb(0, 0, 255); 
 
    flex-grow: 1; 
 
}

<div class="flex"> 
 
    <div class="left"> 
 
    LEFT 
 
    </div> 
 
    <div class="flex right"> 
 
    <div class="rightTop">RIGHT TOP</div> 
 
    <div class="rightBottom">RIGHT BOTTOM</div> 
 
    </div> 
 
</div>

Answer 3

で右の行を入れてしまうでしょう。そう、そこから行く。また、.rightTopと.rightBottomの高さを一致させるように変更しました。

HTML

<div class="container"> 
    <div class="left"> 
    LEFT 
    </div> 
    <div class="right"> 
    <div class="rightTop">RIGHT TOP</div> 
    <div class="rightBottom">RIGHT BOTTOM</div> 
    </div> 
</div> 

CSS

.container { 
    display: flex; 
    flex-wrap: wrap; 
} 

.left { 
    flex: 15%; 
    background-color: rgb(255, 0, 0); 
    height: 150px; 
} 

.right { 
    flex: 85%; 
} 

.rightTop { 
    height: 20px; 
    background-color: rgb(0, 255, 0); 
    align-self: flex-start; 
} 

.rightBottom { 
    background-color: rgb(0, 0, 255); 
    height: 130px; 
} 

Codepen例：https://codepen.io/StefanBobrowski/pen/bqyQWJ