使用列数时框阴影被切断

Question

我需要从上到下，然后从左到右订购商品，例如：

1 5
2 6
3 7
4 8

但是，框阴影已被切断。请参考代码段：在底部截去项目3的框阴影，在顶部截取项目4的阴影（镀铬）。

对此也有类似的问题，但是在这种情况下答案不适用。我不能在容器上使用flex，flex-direction: column因为这需要显式的高度，并且item计数是动态的。我也无法将项目设置display: inline-block为其他答案所建议的，因为我需要使用flex控制此内容。

1 5
2 6
3 7
4 8

.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;
}

我从无法解决的其他类似问题中尝试了另外两件事：设置overflow: visible，在具有透明边框的项目周围添加包装器。感谢您的任何建议。

Answer 1

添加display: inline-flex和width: 100%属性。break-inside: avoid-column属性无效。

.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>