如何使嵌套flex子级可滚动

Question

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

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

下面是我针对这种情况的示例:https://jsfiddle.net/ecbtrn58/2/

<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;
        }
      }
    }
  }
}

如何使留言列表滚动？

Answer 1

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

null

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