的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>