Assign different overflow behaviour for the parent depending on the child

Question

I am trying to figure out how to make overflow hidden for for the parent child for one child but not for the other. I am making an inventory for fivem so i want it possible to scroll through the slots but then it makes the items in the slots not able to be dragged out of the parent?

Its coded in jquery. And the thing is that the items is assigned to the slots so i cant separate them.

Example code:

/* 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 */
}

I have tried making the child more separated but then that bugs the drag and drop.

Answer 1

You can specify an overflow-y: scroll; rule just for the second one, like below:

/* 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>