如何使嵌套的flex子可滚动答案

【问题标题】：How to make nested flex child scrollable如何使嵌套的flex子可滚动
【发布时间】：2020-10-31 23:01:36
【问题描述】：

我在一个高度未知的容器中有一个消息列表（这是一个 flex 子项），并希望使它们可滚动。但我找不到flex-grow: 1、min-height: 0 和其他 flex 技巧的适当组合来使其正常工作 - 消息列表仍然大于其父级。

当我将 overflow-y: auto 添加到它的父级时 - 它可以工作，但是除了消息列表之外，这个父级还包含一些不应滚动的内容。

<div class="page">
  <div class="messages-section">
    <div class="header">Your messages</div>
    <div class="content">
      <img src="https://http.cat/100" width="70" height="50"/>
      <div class="messages-list">
        <div class="message">Hi.</div>
        <div class="message">Hello.</div>
        <div class="message">Good morning.</div>
        <div class="message">Yo!</div>
      </div>
    </div>
  </div>
</div>

.page {
  background-color: #ddd;
  width: 300px;
  height: 300px;
  .messages-section {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;
    background-color: #ccc;
    .header {
      background: #bbb;
      padding: 5px;
    }
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 5px;
      .messages-list {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        
        /* What to add here to make it scrollable? */
        .message {
          height: 50px;
          margin: 10px;
          padding: 10px;
          background: #1dc497;
        }
      }
    }
  }
}

如何让消息列表滚动？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您必须将.content 的height 设置为100% 并使其可滚动：

.page {
  background-color: #ddd;
  width: 300px;
  height: 300px;
}

.page .messages-section {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
  background-color: #ccc;
}

.page .messages-section .header {
  background: #bbb;
  padding: 5px;
}

.page .messages-section .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  height: 100%;
  overflow-x: scroll;
}

.page .messages-section .content .messages-list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* What to add here to make it scrollable? */
}

.page .messages-section .content .messages-list .message {
  height: 50px;
  margin: 10px;
  padding: 10px;
  background: #1dc497;
}

<div class="page">
  <div class="messages-section">
    <div class="header">Your messages</div>
    <div class="content">
      <img src="https://http.cat/100" width="70" height="50" />
      <div class="messages-list">
        <div class="message">Hi.</div>
        <div class="message">Hello.</div>
        <div class="message">Good morning.</div>
        <div class="message">Yo!</div>
      </div>
    </div>
  </div>
</div>

【讨论】：

在这个例子中它可以工作，但由于某些原因在我的真实例子中它不是。当我为内容提供 100% 的高度时，它需要容器的高度（在我们的例子中为 300px）。
@ArsenNykytenko 好的，但什么是真正的？
我的例子应该非常相似）我正在寻找差异。查看我之前的评论，在看到您的答案之前我已经对其进行了编辑。
@johanchopin 您能否解释一下为什么当您将height: 100% 添加到内容时，它不会变成 300px（其父项的高度）？