时间戳

首页 > 解决方案 > 如何使嵌套的flex子可滚动

html - 如何使嵌套的flex子可滚动

问题描述

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

如何使消息列表滚动？

标签： htmlcssflexbox

解决方案

您必须将 of 设置height为.content并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>

推荐阅读