I'm having an issue with a parent element and a child element in my CSS code. The parent has the following properties:
position: relative;
overflow-y: unset;
And the child has these properties:
position: relative;
left: -70px;
Everything looks good until I set overflow-y: auto on the parent, which causes the child element to get clipped on its left side. I'm not sure why this is happening. How can I add a vertical (auto) scrollbar to the parent without clipping the child?
const checkbox = document.getElementById('checkbox');
const right = document.querySelector('.right');
const value = document.getElementById('value');
checkbox.addEventListener('change', (event) => {
const overflowY = event.target.checked ? 'auto' : 'unset';
right.style.overflowY = overflowY;
value.innerText = overflowY;
});.right {
background-color: red;
width: 100px;
height: 300px;
position: relative;
left: 200px;
/* toggle overflow-y between unset and auto */
overflow-y: unset;
}
.two {
background-color: blanchedalmond;
top: 50px;
height: 50px;
position: relative;
left: -70px;
}<body>
<p>
Whenever overflow-y changes from unset to auto the yellowish block gets clipped.
</p>
<p>
<input id="checkbox" type="checkbox"> overflow-y: <span id="value">unset</span>
</p>
<div class="right">
<div class="two right-content"></div>
</div>
</body>