作出這樣的div從底部成長爲頂級取決於每個內容的大小

Question

我有一個測試小小提琴：

.wrapper { 
 
     display: flex; 
 
     flex-direction: column; 
 
     min-height: 50vh; 
 
     width: 600px; 
 
     border: 1px solid red; 
 
     padding: 1em; 
 
    } 
 

 
    .content-one { 
 
     border: 1px solid green; 
 
     display: flex; 
 
    } 
 

 
    .content-two { 
 
     border: 1px solid blue; 
 
     display: flex; 
 
    }

<div class="wrapper"> 
 

 
<div class="content-one"> 
 

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 

 
</div> 
 

 
<div class="content-two"> 
 

 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
</div> 
 

 
</div>

，但我無法弄清楚如何我纔拿到兩個div根據其內容高度從底部到頂部生長。

如果我只有一個內容容器，這是沒有問題的，但如果我的包裝內有兩個動態增長的div，需要從下往上擴展，該怎麼辦？

Answer 1

嘗試添加下面的CSS在你的包裝類

.wrapper { 
     display: flex; 
     flex-direction: column; 
     min-height: 50vh; 
     width: 600px; 
     border: 1px solid red; 
     padding: 1em; 
     justify-content: flex-end; 
    }