Search code examples
cssoverflow

"overflow-y: scroll" Causing X-Overflow To Get Cut Off

when I put "overflow-y: scroll" on containerTwo I still want all of greenBlock to appear. The problem is that when I put on "overflow-y: scroll" it cuts it off. I wouldnt be opposed if it was cut off while scrolling but once its stationary I need it to overflow.

.containerOne {
    padding-left: 200px;
    background-color: red;
    height: 200px;
    width: 200px;
}
.containerTwo {
    background-color: blue;
    height: 200px;
    width: 200px;
    overflow-y: auto;
}
.blockThing {
    background-color: orange;
    height: 70px;
    width: 100px;
    margin: 5px;
}
.greenBlock {
    background-color: green;
    height: 20px;
    width: 80px;
    transform: translatex(-40px);
}
<div class="containerOne">
    <div class="containerTwo">
        <div class="blockThing"></div>
        <div class="blockThing">
            <div style="background-color: green; height: 20px; width: 80px; transform: translatex(-40px)">
            </div>
        </div>
        <div class="blockThing"></div>
    </div>
</div>

without "overflow-y: auto;" on .containerTwo:

without "overflow-y: auto;"

with "overflow-y: auto;" on .containerTwo:

with "overflow-y: auto;"

I tried position relitive and absolute on the containers, setting overflow-x to visible, setting z-index of the block to a higer value.

Solution

  • You could add another 'div' tag inside 'containerTwo' and modify your css like this.

    .containerOne {
    padding-left: 200px;
    background-color: red;
    height: 200px;
    width: 200px;
}
.containerTwo {
    height: 200px;
    width: 200px;
    overflow-y: scroll;
    padding-left: 35px;
    margin-left: -35px;
}
.containerTwoInner {
    background-color: blue;
    margin: -5px 0;
}
.blockThing {
    background-color: orange;
    height: 70px;
    width: 100px;
    margin: 5px;
}
.greenBlock {
    background-color: green;
    height: 20px;
    width: 80px;
    transform: translatex(-40px);
}
    <div class="containerOne">
    <div class="containerTwo">
      <div class="containerTwoInner">
        <div class="blockThing"></div>
        <div class="blockThing">
            <div class="greenBlock"></div>
        </div>
        <div class="blockThing"></div>
      </div>
    </div>
</div>