聊天框组件-具有可滚动内容的Flex项

Question

我正在构建一个类似于以下内容的简单聊天组件。

为解决这个问题，我使用了flexbox，这样做的时候遇到了一个很小的问题，但是确实设法解决了，但是我不确定它是如何工作的以及是否还有其他解决方法关于它。

基本上，包装列表（.list-wrapper）的容器的flex属性设置为1，因此它将占用所有可用空间，列表（.list）的容器具有{{1 }}的100％。

仅具有上述属性会导致仍显示溢出内容，而不显示滚动条。我似乎要解决此问题的唯一方法是为height设置某种类型的固定高度，在我的示例中，我使用.list-wrapper进行了设置。

我的理解是，高度以某种方式像height: 1px一样起作用，然后min-height接管并占据了其余空间。由于div的高度设置为1px，因此显然显示了滚动，因此总是存在溢出。

我知道我设法解决了这个问题，但是我很好奇它为什么起作用以及是否还有其他方法可以做到这一点。

flex: 1

.content {
  border: 1px solid tomato;
  display: flex;
  flex-direction: column;
  height: 75vh;
}

.list-wrapper {
  border: 2px solid #bada55;
  flex: 1;
  height: 1px;
}

.list-item {
  padding: 10px;
  border: 1px solid blue
}

.list {
  height: 100%;
  overflow-y: auto;
}