中心内容是从具有固定高度和滚动条的父级中删除的

Question

我有一个溢出y和固定高度的父。我希望将孩子的中心对齐。子项的内容大小不一，有时会溢出父项并触发滚动条。在这些情况下，孩子的顶部和底部内容被删除。

我希望孩子在中心对齐，但前提是它比父母要小。或者它可以始终居中对齐，但不应该删除内容。

看看这里的问题：https://jsfiddle.net/gumy023z/

.parent {
  background-color: red;
  height: 40px;
  overflow-y: scroll;
  
  /* Comment out the flex, and all the content will be available */
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="parent">
  <div class="child">
    This is a test <br> This is a test <br> This is a test
  </div>
</div>

Answer 1

对齐将在flexbox的flex轴中起作用。因此，您可以切换到列flexbox并为min-height: 0元素提供min-width: auto（它会覆盖flex项的默认child设置） - 请参阅下面的演示：

.parent {
  background-color: red;
  height: 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column; /* ADDED */
  justify-content: center;
  align-items: center;
}

.child {
  min-height: 0; /* ADDED */
}

<div class="parent">
  <div class="child">
    1. This is a test <br> 2. This is a test <br> 3. This is a test
  </div>
</div>