CSS - 溢出-y：滚动；不能滚动并获得> 100％的块高度答案

【问题标题】：CSS - overflow-y: scroll; not turn scrollable and getting >100% of the block heightCSS - 溢出-y：滚动；不能滚动并获得> 100％的块高度
【发布时间】：2021-01-02 03:00:17
【问题描述】：

我需要在left-navbar 内制作 y 轴可滚动块。该块的高度必须填满left-navbar 的所有空闲空间。这样，left-navbar 的高度就是页面的 100%，仅此而已。

但是history-overflow是不可滚动的，所有history-item元素都显示出来了，所以他们让所有left-navbar的高度都大于页面高度。

另外，当页面高度缩小时，history-overflow 应该只填充可用空间以使left-navbar 高度不超过 100%。这个怎么做？

Codepen 沙盒示例： https://codepen.io/car1ot/pen/zYqLqKB

HTML 代码：

<div className="left-navbar">
    <div className="history">
        <label>History</label>
        <div className="history-overflow">
            <div className="history-item">*...some content here...*</div>
            *...more history-item(s) here...*
        </div>
    </div>
</div>

CSS（scss）代码：

div.left-navbar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 290px;
    height: 100%;
    padding: 25px 20px;
    box-sizing: border-box;

    div.history {
        display: flex;
        flex-direction: column;

        div.history-overflow {
            margin-top: 8px;
            margin-right: -20px;
            padding-right: 14px;
            overflow-y: scroll;

            div.history-item {
                display: flex;
                align-items: center;
                flex-shrink: 0;
                padding: 0 16px 0 6px;
                height: 40px;
                width: 100%;
                border-radius: 7px;
                margin-bottom: 8px;
                box-sizing: border-box;
            }
        }
    }
}

【问题讨论】：

只是猜测，但尝试将overflow: hidden 添加到.history 和.left-navbar。很难说，如果你能提供一个 jsfiddle/codepen 来重现这个问题会更容易。
这无济于事......
codepen.io/car1ot/pen/zYqLqKB

标签： html css sass

【解决方案1】：

如果您将overflow: hidden 设置为.history 并将max-height: 100vh 设置为.left-navbar，我认为它可以满足您的需求。虽然不确定在您的完整布局的上下文中（也许您不想使用 100vh 但那里的值不同）。重要的是你必须在某处限制高度。

【讨论】：

它不起作用。请查看 codepen，我已添加：codepen.io/car1ot/pen/zYqLqKB
我尝试将这 2 个属性添加到您共享的代码笔中，它使 .left-navbar 的增长不会超过 100vh 并且可以滚动内容，我不确定您看到了什么问题。

【解决方案2】：

如果我理解正确的话，这就是你的解决方案：

body { padding:0; margin:0; }

div.left-navbar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 290px;
    height: 100vh;  /* This */
    padding: 25px 20px;
    box-sizing: border-box;
    background: rgba(#000, 0.1);

    div.history {
        display: flex;
        flex-direction: column;
        height:100%;  /* This */
        div.history-overflow {
            margin-top: 8px;
            margin-right: -20px;
            padding-right: 14px;
            background: rgba(blue, 0.1);
            overflow-y:scroll;
            div.history-item {
                display: flex;
                align-items: center;
                padding: 0 16px 0 6px;
                height: 100px;
                width: 100%;
                border-radius: 7px;
                margin-bottom: 8px;
                box-sizing: border-box;
                background: rgba(#000, 0.075);
            }
        }
    }
  }

【讨论】：