的CSS柔性溢出問題

Question

我：

.container { 
    display:flex; 
    align-items:center 
} 
.content { 
    flex-grow:1 
} 

以僅適用於CSS垂直對齊的.content股利。內容動態變化，這就是爲什麼我不能使用position:absolute; margin-top:50%...樣式。因爲我不知道每個內容更新的確切高度爲div。

但是在.container寬度發生變化但高度依然存在的情況下，.content溢出.container頂部，因爲它將文本包裝在其中。

我試圖做的是從來沒有讓.content超過頂部位置小於0即使是最理想的情況將被保留的.container的padding-top價值和.contentmargin-top值。溢出底部可以，事實上這將是我的首選。

任何解決方法？

Answer 1

您可以靈活使用.containerheight：使用min-height而不是height。

.container { 
 
    display: flex; 
 
    align-items:center; 
 
    min-height: 75px; 
 
    border: 3px solid blue; 
 
} 
 
.content { 
 
    height: 150px; 
 
    flex-grow: 1; 
 
    border: 3px solid red; 
 
    resize: vertical; 
 
    overflow: auto; 
 
}

<div class="container"> 
 
    <div class="content"></div> 
 
</div>

另一種可能性是使用overflow: auto。但是，不要使用align-items:center居中，請使用margin: auto 0。

.container { 
 
    display: flex; 
 
    height: 75px; 
 
    border: 3px solid blue; 
 
    overflow: auto; 
 
    resize: vertical; 
 
} 
 
.content { 
 
    height: 150px; 
 
    flex-grow: 1; 
 
    margin: auto 0; 
 
    border: 3px solid red; 
 
}

<div class="container"> 
 
    <div class="content"></div> 
 
</div>