html - 为什么我的子 div 不能滚动并在列中居中？

Question

我正在努力使我的.centerItdiv 垂直居中，并.div1在我将更多.centerItdiv 添加到列中后保持可滚动。

在我添加更多的.centerItdiv 之后，它们必须保持它们height: 20px而不是挤压。

JSFiddle 示例

.container {
    display: flex; 
    background: red;
    width: 300px;
    height: 300px;
}
.div1 {
    background: yellow;
    height: 90%;
    width: 27%;
    margin: 5px;
    overflow-y: scroll;
}
.div2 {
    background: blue;
    height: 90%;
    width: 74%;
    margin: 5px;
}
.centerIt {
    background: green;
    width: 100%;
    border: solid 1px black;
    height: 20px;
    color: green;
}

<div class="container">
    <div class="div1">
        <div class="centerIt"></div>
        <div class="centerIt"></div> 
        <div class="centerIt"></div> 
        <div class="centerIt"></div>
        <div class="centerIt"></div>
        <div class="centerIt"></div> 
        <div class="centerIt"></div> 
        <div class="centerIt"></div> 
    </div>
    <div class="div2"></div>
</div>

标签： htmlcssflexbox

Answer 1

只需尝试添加min-height: 20px到.centerIt而不是高度和

  display: flex;
  flex-direction: column;
  justify-content: center;

要.div1款式，应该做的。

JSF中叉