我在一个高度未知的容器中有一个消息列表（这是一个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;
        }
      }
    }
  }
}

如何使留言列表滚动？