CSS Box Shadow on Container Div Causes Scrollbars

CSS box shadow on container div causes scrollbars

Webkit changed its behavior recently as pointed out here:
http://archivist.incutio.com/viewlist/css-discuss/109662

Indeed as of today it is still an issue in Gecko and maybe other browsers.

---

I managed to fix this nasty problem on Gecko using negative margins which also work on all other browsers.

Let's assume you have a screen-wide element (E) with box-shadow applied with zero offsets and blur radius R. Let's assume you are dealing with horizontal scrollbar problem because shadow causes element E to relayout with added width.

1. wrap E with helper wrapper element (W)
2. set overflow:hidden on W
3. set padding: R 0 R 0 on W
4. set margin: -R 0 -R 0 on W

The idea is to use overflow hidden to clip out problematic shadows on the left and right. And then use padding+negative margin trick to not clip top and bottom shadows and to keep the box on the same spot in HTML flow.

You can adapt this technique to clip out any arbitrary sides of your problematic shadow box.

CSS shadow for :before and :after on a scrollable container

Well, about the scrolling issue, the solution is in the video from Lea Verou conference.

I could post the code here, but people should see the video, it deserves it

About the request shadow, generated with backgrounds, I porvide you 2 different options, generated with multiple backgrounds. The first uses rounded corners, the second linear ones.

I have done it bigger and darker than requested, so that the difference is easier to see.

.one {  width: 200px;  height: 150px;  border: solid 1px red;  background-image: radial-gradient(circle at bottom right, black 0%, white 70%),    radial-gradient(circle at bottom left, black 0%, white 70%),    linear-gradient(to top, black 0%, white 100%);  background-size: 40px 40px, 40px 40px, 100% 40px;  background-repeat: no-repeat;  background-position: bottom left, bottom right, bottom left;  }
.two {  width: 200px;  height: 150px;  left: 220px; top: 10px;  position: absolute;  border: solid 1px red;  background-image: linear-gradient(-45deg, black 0%, white 50%),    linear-gradient(45deg, black 0%, white 50%),    linear-gradient(to top, black 0%, white 100%);  background-size: 40px 40px, 40px 40px, 100% 40px;  background-repeat: no-repeat;  background-position: bottom left, bottom right, bottom left;  }

<div class="one"></div><div class="two"></div>

Show box-shadow outside of overflow area

Can you add margins to the inner div's?

    #inner-div {
      margin: 10px
    }

check this JSFiddle

Nested divs producing a scrollbar. Why?

This is happening because your .item element is set to display as an inline-block. This means it's affected by things like line-height and vertical-align.

The default vertical alignment on inline-block elements is baseline. This means they're set to appear at the base line of any text that may be entered alongside it. I'm not 100% sure but I think there may be an issue here where box-sizing is ignored when making this calculation, and the base line ends up being 2 pixels below where it should be (due to the cumulative 2 pixels of border applied to the top and bottom of the element).

If you want that element to remain being displayed this way, a quick fix is to set its vertical-align to top:

.item {
    ...
    vertical-align: top;
}

Codepen demo.

---

Related Topics