栅格元素的最大高度不会扭曲

Question

我有简单的css / html，我试图在其中构建漂亮的一页项目选择器，因此您的左侧库存管理器中有项目，当您单击它们时，它们会将它们移动到另一个，但是如果您有更多的项目div句柄应该放在overflow-y: scroll;中，但是不会，所以我尝试添加max-height:100%;，这样当没有项目但父级没有特定的高度数字（因为它在网格中）时，它就不会破坏漂亮的外观，我尝试在父节点上使用calc(100vh - 4rem)，因此如果不使用导航栏，则需要100vh的时间，但这看起来并不好，将来更改导航栏时可能会出现一些问题。您可以将该代码复制到html中并删除所有div.item，这样您将知道它的外观，然后添加div.item，这样您就可以看到出了什么问题

html：

<div class="container">
    <div class="navbar">
        <!-- navbar items -->
    </div>
    <div class="main">
        <div class="inventory">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="selectedItems">

        </div>
        <div class="controlButtons">

        </div>
    </div>
</div>

样式：

.container {
        display: grid;
        width: 100vw;
        height: 100vh;
        grid-template-columns: 1fr;
        grid-template-rows: 5rem 1fr;
        grid-template-areas: "navbar" "offer-manager";
    }

    .navbar {
        grid-area: navbar;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: stretch;
        background: yellow;
    }

    .main {
        grid-area: offer-manager;
        padding: 1rem;
        display: grid;
        grid-template-columns: 1fr 8rem 1fr;
        grid-template-rows: 1fr 6rem 12rem;
        grid-template-areas: "inventory controls offer" "inventory controls ." "inventory . .";
        background: green;
    }

    .inventory {
        grid-area: inventory;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 1rem;
        max-height: 100%;
        overflow-y: scroll;
        background: blue;
    }

    .selectedItems {
        grid-area: offer;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 1rem;
        max-height: 100%;
        overflow-y: scroll;
        background: red;
    }

    .item {
        margin: 2rem;
        width: 8rem;
        height: 5rem;
        background: black;
    }

Answer 1

如果我做对了，您可以尝试在库存类中以px为单位添加固定高度。

Answer 2

[我同意Christian.P，我刚刚尝试了一下，并在清单上放置了max-height: 100vh;，并且效果很好，溢出按我想的方式滚动。