高度变化模式中的可滚动div答案

【问题标题】：Scrollable div in height changing modal高度变化模式中的可滚动div
【发布时间】：2022-01-21 16:51:26
【问题描述】：

我有一个 Modal，它会根据显示的列表项的数量来改变它的高度（也有一个最大高度）。我在模态中有 2 个 div，一个是静态的，另一个包含列表，需要时必须可以滚动。

问题是如果不修复它的高度，我无法让它滚动。

HTML

<div class="modal">
  <div class="static"></div>
  <div class="scrollable">
    <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>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
</div>

CSS

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  width: 300px;
  max-height: 400px;
  background-color: lightblue;
  padding: 10px;
  justify-content: center;
}

.static {
  height: 200px;
  background-color: lightgreen;
  margin: 5px;
}

.scrollable {
  margin: 5px;
  background-color: orange;
  overflow-y: auto;
}

我想只使用 CSS/SCSS 来完成它。

【问题讨论】：

标签： html css vertical-scrolling

【解决方案1】：

试试这个：

.modal {
  ...
  display: flex;
  flex-direction: column;
}

【讨论】：

就是这样，兄弟。挣扎了好几个小时。谢谢
@mbassini 将答案标记为已接受。