Question

我有一个列表（#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/

Answer 1

您可以简单地向ul元素添加height或max-height，并添加溢出y：滚动

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

user/lookup limits

Answer 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");
})

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

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

2 个答案: