当使用 column-count 时，溢出的内容在除第一列之外的所有内容中完全消失，为什么？

Question

在包装器中使用 column-count 时，包装器中的容器已应用 border-radius，并且容器中的内容溢出，内容在所有列中完全消失，除了第一列一。

这是我的例子：https://jsfiddle.net/f4nd7tta/
红色半圆只出现在第一列，为什么？

#main_wrap{
    width:100%;
    border:solid 1px black;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}
#main_wrap > div{
    border-radius:5px;
    overflow:hidden;
    position:relative;
    -moz-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
    width:70%;
    height:300px;
    border:solid 2px grey;
    margin:2px;
}
#main_wrap > div > div{
    position:absolute;
    background:red;
    border-radius:40px;
    width:40px;
    height:40px;
    right:-20px;
    top:0;
}

<div id="main_wrap">
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
</div>

Answer 1

老实说，我不知道为什么会这样，我正在查看文档是否指定了此行为，我想检查它是故意的还是错误。现在我正在使用

-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);

它有效...所以在 #main_wrap > div 中添加上述属性，我认为如果您排除供应商前缀，那么 transform: translateX(0); 就足够了。

Demo

好的，我认为这是一个错误：

Issue 84030 : CSS 3 Column bug (overflow: hidden like functionality where it shouldn't)

The absolute positioned elements are clipped as if there is an overflow: hidden applied to the box. However, applying overflow: visible or any other rule does not fix the problem

我考虑得更多，正如我建议的第一个解决方案，我随机插入了属性并且它起作用了，还有一种方法可以合法地使用 clip 属性你将不再需要 overflow: hidden;..

#main_wrap > div > div{
    position:absolute;
    background:red;
    border-radius:40px;
    width:40px;
    height:40px;
    right:-20px;
    top:0;
    clip: rect(0px,20px,40px,0px);
}

Demo 2 （剪辑演示）

Answer 2

请找到我的 ANSWER 的工作示例，我已经在 Firefox 和 Chrome 中测试过。

CODE HTML
<!--you can add as many divs as you like it will work -->
<div id="main_wrap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CODE CSS
#main_wrap{
  width:100%;
}

#main_wrap > div{
  width:20%; #***
  height:250px; #***
  background:whitesmoke;
  float:left;
  position:relative;
  overflow:hidden;
  border-radius:5px;
  border:2px solid gray;
  margin-left: 10.75%; #***
  margin-bottom:1rem; #***
}

#main_wrap > div:after{
  content:"";
  position:absolute;
  width:40px;
  height:40px;
  background:red;
  border-radius:50%;
  right:-20px;
}

我已经重新创建了示例中显示的布局，但您可能需要进行一些更改才能获得最终布局。因为它使用标记的（#***）属性

Answer 3

我花了很多时间调查这个问题并找到了将 CSS 属性 will-change: transform; 添加到列布局内的项目的建议。例如：

<div class="container">
  <div class="item">
    <!-- Things with overflowing content -->
  </div>
  <div class="item">
    <!-- Things with overflowing content -->
  </div>
  <div class="item">
    <!-- Things with overflowing content -->
  </div>
</div>

<style>
  .container {
    columns: auto 5;
    column-gap: 0;
    margin: -16px;
  }

  .items {
    break-inside: avoid;
    padding: 16px;
    page-break-inside: avoid;
    will-change: transform;
  }
</style>

Answer 4

似乎让子组件 width: 100% 启用父-父对象的 columnCount: ${window.innerWidth/300} 抽象来维持子组件的显示，我试图阻止 iOS 专注于 <textarea/> 我在里面。另一个热门提示是使父-父 height: 100% 和 overflowX: auto 正确....编辑：，并再次修复此错误，但这次使用 columnGap:"1px"

当使用 column-count 时，溢出的内容在除第一列之外的所有内容中完全消失，为什么？

When using column-count, overflowing content completely disappears in all but first column, why?

css

column-count

css-multicolumn-layout