box-shadow cut off when using column-count

Question

I need to order my items from top-to-bottom, then left-to-right, e.g.:

1 5
2 6
3 7
4 8

However, box shadow is being cutoff. Reference the snippet: item 3's box shadow is cut off at bottom and item 4 is cut off at the top (in chrome).

There are similar questions to this, however the answers don't apply in this situation. I can't use flex on the container with flex-direction: column as this requires an explicit height and my item count is dynamic. I also can't set the items to display: inline-block as other answers suggest, since I need to control this content with flex.

.container {
  column-count: 2;
  column-gap: 16px;
  width: 500px;
}

.item {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  margin-bottom: 16px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  break-inside: avoid-column;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Two other things I've tried from other similar SO questions that did not work: setting overflow: visible, adding a wrapper around the items with transparent border. Thanks for any suggestions.

Standifer

Answer 1

Add display: inline-flex and width: 100% properties. break-inside: avoid-column property is invalid.

.container {
  column-count: 2;
  column-gap: 16px;
  width: 500px;
  margin-top: -2px;
  margin-bottom: -14px;
}

.item {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  margin-top: 2px;
  margin-bottom: 14px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Supernational

this did fix the box-shadow on the bottom of item3, but item4 is still cut off at the top for me – Standifer

Quick hack to fix this issue on Chrome would be adding 2px top margin to blocks. – Supernational

cool thanks. I have adjusted the .item margins to be margin-top: 2px, margin-bottom: 14px to maintain the 16px total margin, and then setting margin-top: -2px on the container to preserve the spacing there as well. I think this will work unless im missing something! – Standifer

Answer 2

An idea is to use a pseudo-element where you apply the box-shadow. Make sure the pseudo element doesn't span all the space so it won't get affected by the cutting (use top and bottom different from 0)

.container {
  column-count: 2;
  column-gap: 16px;
  width: 500px;
}

.item {
  border-radius: 3px;
  margin-bottom: 16px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  break-inside: avoid-column;
  position:relative;
  z-index:0;
}
.item:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:1px;
  bottom:3px;
  left:0;
  right:0;
    box-shadow: 
   0px 3px 1px -2px rgba(0, 0, 0, 0.2), 
   0px 2px 2px 0px rgba(0, 0, 0, 0.14), 
   0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Frannie

interesting solution! – Standifer