第一個柔性盒子沒有增長到第二排

Question

我知道在stackoverflow上有相當多的柔性盒問題，而且我經常光顧很多，但沒有一個似乎適合我的用例。

有2個問題。

1. 紅色框不會增長到下一個div中的紫色方塊犯規齊平右側
2. 藍色框中的內容的增加基於它的內容，並在紅盒子尋呼機不會浮動到紅色框的底部，不移動標題和列表。

我試圖讓紅框填充到附加圖像中顯示的紅色箭頭和傳呼機的間隙，以便漂浮到容器的底部。將鼠標懸停在藍色框上會使藍色框的高度變得不便利。

我附上了一個jsfiddle。下面是一張圖像，說明問題＃1的預期結果以及箭頭的紅色框延伸。

https://jsfiddle.net/abthss0h/1/

下面是基本柔性盒父行。

.row { 
    display: flex; 
    flex: 0 1 auto; 
    justify-content: space-between; 
    flex-wrap: wrap; 
    flex-direction: row; 
    position: relative; 
    box-sizing: border-box; 
} 

Answer 1

這與嵌套flexboxes和在HTML的變化來包裝 第二「列」完全可能的。

.title { 
 
    max-height: 82px; 
 
} 
 

 
#red { 
 
    background-color: red; 
 
    border: 1px solid red; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
#green { 
 
    background-color: green; 
 
    border: 1px solid green; 
 
} 
 

 
#blue { 
 
    background-color: blue; 
 
    flex: 1; 
 
    border: 1px solid blue; 
 
} 
 

 
#blue:hover { 
 
    height: 300px; 
 
} 
 

 
#purple { 
 
    background-color: purple; 
 
    border: 1px solid purple; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    box-sizing: border-box; 
 
} 
 

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

 
.col-4 { 
 
    width: 16.666%; 
 
    float: left; 
 
    box-sizing: border-box; 
 
} 
 

 
.col-24 { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
.pager { 
 
    margin-top: auto; 
 
}

<div class="row"> 
 
    <div id="red" class="col-4"> 
 
    <div class="title col-24"> 
 
     <h3>Title Here</h3> 
 
    </div> 
 
    <div class="col-24"> 
 
     <ul> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     <li>Item 4</li> 
 
     <li>Item 5</li> 
 
     <li>Item 6</li> 
 
     </ul> 
 
    </div> 
 
    <div class="pager">Pager</div> 
 
    </div> 
 
    <div class="right"> 
 
    <div id="blue"> 
 
     Hover to change height 
 
    </div> 
 
    <div id="purple"> 
 
     Placeholder 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<div class="row"> 
 
    <div id="green" class="col-24"> 
 
    Placeholder 
 
    </div> 
 
</div>