Overflow-y: auto hides parts of elements that are positioned outside the div

Question

I've created a very simple html structure, to represent a div with a button inside:

<div class="side-panel">
  <button>
    C
  </button>
</div>

in my app the wrapping div is a side-panel and the button's purpose is to control the toggle of the side panel. The button is located such that half of it is outside the side panel's div.

The problem is that when I set the .side-panel with overflow-y:auto the part of the button that's outside the div is hidden, and I cant figure out why nor how to make it visible while keeping the overflow y Behavior.
here is a working snippet

.side-panel {
  position: absolute;
  background: blue;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  width: 53px;
  height: 200px;
  box-shadow: inset 1px 0px 0px var(--grandma);
}
  button {
    position: relative;
    top: 24px;
    right: 15px;
    background-color: #fff;
    border-radius: 50%;
    height: 30px;
    width: 30px;
  }

<div class="side-panel">
  <button>
    C
  </button>
</div>

with the problem

I suggest you use another element for the div with the overflow-y. and put the positioned absolute outside of it. Check this [link](https://stackoverflow.com/questions/22955465/overflow-y-scroll-is-hiding-overflowing-elements-on-the-horizontal-line) — DRA, Jan 02 '22 at 08:13
What element is side-panel positioned relative to? I note that its height is defined by bottom: 0; — A Haworth, Jan 02 '22 at 10:26

score 0 · Answer 1 · edited Jan 03 '22 at 13:06

* {
  margin: 0;
  padding: 0;
}

section {
  position: absolute;
  right: 0;
}

.side-panel {
  position: relative;
  background: blue;
  width: 20vh;
  height: 100vh;
  box-shadow: inset 1px 0px 0px var(--grandma);
}

button {
  position: absolute;
  top: 24px;
  left: -15px;
  background-color: #fff;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  background: red;
}

<section>
  <div class="side-panel">
    <button>
    C
  </button>
  </div>
</section>

Overflow-y: auto hides parts of elements that are positioned outside the div

1 Answers1