时间戳

首页 > 解决方案 > 带有填充的容器内的可滚动 div

html - 带有填充的容器内的可滚动 div

问题描述

我正在尝试在 div 范围内创建一个列表max-height。如果列表长于其父级的最大高度（填充较少），则列表应滚动。

如果我将最大高度直接放在列表本身上，我可以使这个场景工作。它是嵌套的，因为附加了最大高度的外部容器包含不应滚动的区域。我已经使用填充证明了这一点。

我尝试了各种配置，但列表要么不显示滚动条，要么溢出其父级。如果我将最小高度放在列表本身上，我可以让它工作，但这意味着考虑到“非滚动”区域，这意味着它将来可能会发生变化/中断。

该片段包含两个示例。第一个显示我现在的位置，第二个示例在列表中设置了 max-height，只是为了显示我想要实现的目标。

有任何想法吗？

.container {
  margin: 50px;
}
.fixed {
  background-color: lime;
  padding: 20px 0;
}
.scroll {
  background-color: red;
  overflow-y: auto;
}
li {
  height: 60px;
}
<div class="container">
  <div class="fixed" style="max-height:200px">
    <ul class="scroll">
      <li>This doesn't work!</li>
      <li>Line 2</li>
      <li>Line 3</li>
      <li>Line 4</li>
    </ul>
  </div>
</div>

<div class="container">
  <div class="fixed" style="max-height:200px">
    <ul class="scroll" style="max-height:160px">
      <li>This is to demonstrate what I'm trying to achieve.</li>
      <li>Line 2</li>
      <li>Line 3</li>
      <li>Line 4</li>
    </ul>
  </div>
</div>

标签： htmlcss

解决方案

使固定元素成为 flexbox 容器：

.container {
  margin: 50px;
}
.fixed {
  background-color: lime;
  padding: 20px 0;
  display:flex;
}
.scroll {
  background-color: red;
  overflow-y: auto;
  width:100%;
}
li {
  height: 60px;
}
<div class="container">
  <div class="fixed" style="max-height:200px">
    <ul class="scroll">
      <li>This doesn't work!</li>
      <li>Line 2</li>
      <li>Line 3</li>
      <li>Line 4</li>
    </ul>
  </div>
</div>

<div class="container">
  <div class="fixed" style="max-height:200px">
    <ul class="scroll" style="max-height:160px">
      <li>This is to demonstrate what I'm trying to achieve.</li>
      <li>Line 2</li>
      <li>Line 3</li>
      <li>Line 4</li>
    </ul>
  </div>
</div>

推荐阅读