CSS 列布局切断框阴影，剪辑元素

Question

CSS 列布局切断框阴影。

这不是 Box-shadow trimmed in CSS columns in Chrome 的重复，因为我已经尝试了该帖子中的所有解决方案，但都没有奏效。

这些 div 具有框阴影。请注意，第 3 和第 4 个元素的框阴影被切断了。 我尝试了

的不同变体

   .masonrygrid {
      column-count: 2;
      column-gap: 10px;
   }
   .item {
      inline-block, 
      width:100%;
      break-inside: avoid;
      page-break-inside: avoid;
      -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
      break-inside: avoid; /* IE 10+ */
      margin-bottom: 10px;
      ...
   }

html {
        height:100%;
}
body {
    margin: 0;
    font-size: 16px;
    height:100%;
}
.main {
    min-height: 100%;
    background: #dedede;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.masonrygrid {
    margin: 0 auto;
    width: 50%;
/*  height:100%; */
    padding: 1rem;
    background: black;
    display: block;
    column-count: 2;
    column-gap: 10px;
}
.item {
  display: inline-block, 
  width:100%;
    background: blue;
    box-shadow: 0px 1px 10px 2px #bada55;
    height: 100px;
    margin-bottom: 10px;
    break-inside: avoid-column;
/*  break-inside: avoid; */
    page-break-inside: avoid-column;
       -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
              page-break-inside: avoid; /* Firefox */
                   break-inside: avoid; /* IE 10+ */
}
.item:nth-of-type(2) {
    height: 150px;
}

<div class="main">
    
    <div class="masonrygrid">
            <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 class='item'>6</div>
        </div>
</div>

代码笔https://codepen.io/craigocurtis/pen/ExmmYGO