如何防止列表超出父 <div>？答案

【问题标题】：How to prevent a list from outgrowing the parent <div>?如何防止列表超出父 <div>？
【发布时间】：2019-01-24 05:50:08
【问题描述】：

我有一个列表 (#this-list)，下面有一个输入框。当用户提交输入框时，该值将添加到列表#this-list（这在 react.js 中处理）。当列表中有很多项目时，列表会导致父 <div> 调整大小。如何将列表的大小限制为填充高度，当列表开始变大时，显示滚动条？

...
        <div class="d-flex flex-column h-100">
            <div class="flex-fill scroll-y">
                <ul id="this-list">
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                </ul>
            </div>
...

何时列出的页面为空：https://jsfiddle.net/tomwassing/g7dkLx1h/

列表填满时的页面：https://jsfiddle.net/tomwassing/u80wqj3s/

【问题讨论】：

标签： css twitter-bootstrap flexbox bootstrap-4 overflow

【解决方案1】：

您可以简单地为 ul 元素添加一个高度或最大高度并添加溢出-y：滚动

#this-list {
  max-height: 100px;
  overflow-y: scroll;
}

https://jsfiddle.net/u80wqj3s/10/

【讨论】：

没有硬编码的值就没有办法实现吗？
不管怎样，你必须为元素指定一个高度，否则它会自动调整到它的内容

【解决方案2】：

您的问题似乎是您没有限制 div 的高度，相反让他们占据他们需要的所有位置（height 默认为auto）。

解决问题的一种方法是使用一个 JS 脚本来计算左列的高度，然后将值发送到右列：

document.addEventListener("DOMContentLoaded",()=>{
    let leftForm = document.getElementById("left-form");
    let leftHeight = Number(
        getComputedStyle(leftForm).getPropertyValue("height").slice(0,-2));

    let rightForm = document.getElementById("rightForm");
    let rightFormHeight = Number(
        getComputedStyle(rightForm).getPropertyValue("height").slice(0,-2));
    myDiv.style.setProperty("max-height",leftHeight - rightFormHeight + "px");
})

当然，您需要将 overflow: scroll 或 overflow-y: scroll 添加到“myDiv”（包含溢出列表的 div）。

【讨论】：