Box-shadow still cutting off with overflow-y set to visible

Question

I am having the same issue as in this question, but I need to have overflow-x set to scroll or else the entire document will be wider than the screen. Theoretically, setting overflow-y to visible should keep the box shadow visible, but it still cuts it off. This can be seen with the code below.

*::-webkit-scrollbar {
  display: none;
}
body {
  margin: 0;
  background: #ddd;
  height: 100%;
  width: 100%;
}
.scroll {
  width: 100%;
  height: 60px;
  overflow-x: scroll;
  overflow-y: visible;
  white-space: nowrap;
}
.box {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 5px;
  background: #fff;
  box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 1);
}

<div id="container">
  <div class="scroll">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

I would like for the drop shadow to be fully visible outside of the parent div, is this possible at all?

Nope. You set `overflow` to anything but `visible`, everything stays in, including shadows (in the night)... — tao, Feb 12 '17 at 03:22

score 5 · Answer 1 · answered Feb 12 '17 at 09:34

5

Box shadow is cutting off because there supposed to be a scrollbar that you are just hiding.

Simple solutoin

Set a bottom padding to .scroll container.

answered Feb 12 '17 at 09:34

user2372395

61
3

I was thinking about this, but due to the set up of this site, it would be difficult to do that, I was hoping for another way. – ZomoXYZ Feb 12 '17 at 14:15
But why do you use **overflow-x: scroll** since you are hiding it? – user2372395 Feb 13 '17 at 06:23
In the actual project, there will be more boxes and has to be scrollable. If I leave it at `visible` then when the user scrolls, the entire document will scroll and everything below it will be moved. If I leave it at `hidden` then the other boxes in this row will be hidden as well. – ZomoXYZ Feb 13 '17 at 13:40

score 1 · Answer 2 · answered Jul 27 '19 at 17:05

1

Subtract padding from margin:

#container {
  margin: -100px 0;
}

answered Jul 27 '19 at 17:05

Terrel Jones Jr.

29
2

score 0 · Answer 3 · answered Feb 12 '17 at 09:38

You can add a padding to the #container so it always shows the shadow, BUT the horizontal shadows will be cut.

*::-webkit-scrollbar {
  display: none;
}
body {
  margin: 0;
  background: #ddd;
  height: 100%;
  width: 100%;
}
#container {
  max-width: 300px;
  overflow: scroll;
  padding: 100px 0;
}
.scroll {
  width: 100%;
  height: 60px;
  white-space: nowrap;
}
.box {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 5px;
  background: #fff;
  box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, .5);
}

<div id="container">
  <div class="scroll">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

Box-shadow still cutting off with overflow-y set to visible

3 Answers3