css - 使用列数时框阴影被切断

Question

我需要从上到下，然后从左到右排序我的元素，例如:

1 5
2 6
3 7
4 8

但是，框阴影被截断了。引用代码片段:元素 3 的框阴影在底部被切断，元素 4 在顶部被切断(chrome)。

有与此类似的问题，但答案不适用于这种情况。我不能在带有 flex-direction: column 的容器上使用 flex，因为这需要明确的高度，而我的 item 计数是动态的。我也无法将元素设置为 display: inline-block 正如其他答案所建议的那样，因为我需要使用 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>

我从其他类似的 SO 问题中尝试过的其他两件事没有奏效:设置 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>