Flexboxが空きスペースで次の行に折り返す

Question

Flexboxを使用する前のブロックの内容と改行しなくても、改行を改行することはできません。

私が説明するcodepenをした：

.container { 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    background-color: grey; 
 
    width: 800px; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.lightblue { 
 
    background-color: lightblue; 
 
    width: 300px; 
 
    height: 100px; 
 
    display: block; 
 
} 
 

 
.lightpink { 
 
    background-color: lightpink; 
 
    width: 300px; 
 
    height: 50px; 
 
} 
 

 
.red { 
 
    background-color: red; 
 
    width: 300px; 
 
    height: 50px; 
 
} 
 

 
body { 
 
    margin 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="container"> 
 

 
    <div class="lightblue"></div> 
 
    <div class="lightpink"></div> 
 
    <div class="red"></div> 
 
</div>

私が欲しいのは私の水色のブロックの右側に、インラインで表示するために赤いブロックのためです。

この効果を達成する方法を教えてもらえますか？

ありがとうございます！

Answer 1

.container { 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    background-color: grey; 
 
    width: 800px; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.lightblue { 
 
    background-color: lightblue; 
 
    width: 300px; 
 
    height: 100px; 
 
    display: block; 
 
} 
 

 
.lightpink { 
 
    background-color: lightpink; 
 
    width: 300px; 
 
    height: 50px; 
 
} 
 

 
.red { 
 
    background-color: red; 
 
    width: 300px; 
 
    height: 50px; 
 
} 
 

 
body { 
 
    margin 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="container"> 
 

 
    <div class="lightblue" ></div> 
 
    <div> 
 
     <div class="lightpink" ></div> 
 
     <div class="red" ></div> 
 
    </div> 
 
</div>

あなただけのdivに.lightpink、.redを包みます。

Answer 2

これらの3行をコンテナに追加することで、これを達成できます。

flex-direction: column; 
    max-height: 100px; 
    align-content: flex-start; 

実際の動作例を参照してください。 https://jsfiddle.net/meercha/yn9gtnpc/1/