根据子级为父级分配不同的溢出行为

Question

我正在尝试弄清楚如何为一个孩子的父孩子隐藏溢出，但不为另一个孩子隐藏溢出。我正在为 Fivem 制作库存，所以我希望可以滚动浏览插槽，但这样会使插槽中的项目无法从父级中拖出？

它是用 jquery 编码的。问题是这些项目被分配到插槽中，所以我无法将它们分开。

示例代码：

/* This is the parent */
.parent {
    height: 500px;
    width: 600px;
}

/* This child should be assigned to none overflow so i can scroll through it */
.first-child {
    /* CSS */
}

/* This child should be able to go over the overflow */
.second-child {
    /* CSS */
}

我尝试让孩子更加分开，但这会妨碍拖放。

Answer 1

您可以仅为第二个规则指定

overflow-y: scroll;

规则，如下所示：

/* This is the parent */
.parent {
    height: 500px;
    width: 600px;
    background-color: black;
    display: flex;
}

/* This child should be assigned to none overflow so i can scroll through it */
.first-child {
    height: 100%;
    width: 30%;
    background-color: red;
}

/* This child should be able to go over the overflow */
.second-child {
    height: 100%;
    width: 70%;
    background-color: green;
    overflow-y: scroll;
}

<div class="parent">
    <div class="first-child"><div style="width: 1px; height: 2000px;"></div></div>
    <div class="second-child"><div style="width: 1px; height: 2000px;"></div></div>
</div>