css - 背景在滚动 flexbox 内部元素中被切断

Question

我试图让两个元素占据滚动 flexbox 父级的全部高度：

• 我在滚动的 flexbox 父级中有两个 div
• 然后用固定高度的父级再次包装
• 当内容溢出初始高度时，两个div的背景不占满高度

固定高度的包装器不能设置为滚动

.wrapper {
  height: 200px; // Cannot be set to scroll, needs to be fixed height
}
 
.container {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow-y: scroll;
}

.sidebar {
  background: orange;
}

.main {
  flex: 1;
  background: grey;
}

body {
  margin: 0
}

<div class="wrapper">
  <div class="container">
    <div class="sidebar">
      <p>Sidebar</p>
      <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>
    <div class="main">
      <p>Main</p>
    </div>
  </div>
</div>

标签： cssflexbox

Answer 1

你在那里有奇怪的布局和限制。

但是你可以添加flex-wrap: wrap解决.container问题

.wrapper {
  height: 200px;
}
 
.container {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow-y: scroll;
  flex-wrap:wrap;
}

.sidebar {
  background: orange;
}

.main {
  flex: 1;
  background: grey;
}

body {
  margin: 0
}

<div class="wrapper">
  <div class="container">
    <div class="sidebar">
      <p>Sidebar</p>
      <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>
    <div class="main">
      <p>Main</p>
    </div>
  </div>
</div>