在使用CSS3列时，如何消除WebKit添加的填充？

我试图使用（仅适用于WebKit）创建一个类似于两列网格的布局

但是，当我在布局中放置一些块时，WebKit在容器底部添加了一个奇怪的填充（单击要转到的图像）：

我最基本的CSS如下所示：

.columns {
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    width: 404px;
}

.item {
    display: inline-block;
    width: 200px;
}

我怎样才能去掉空格，使父容器（红色）以第6项结尾

我的要求是什么，我正在努力实现什么：

• .container

  必须具有灵活的高度

• .container

  必须在最低的

  .item

  结束的地方正好结束

• .item

  不得被打碎

---

作为第一次尝试，我一直在尝试使用flexbox实现我的结果，但是由于容器具有灵活的高度，我没有找到强制flexbox将我的项目划分为两列的方法

我的要求是：

• .container

  必须具有固定的宽度和灵活的高度

• .container

  应该有确切数量的列（在本例中为两列）

• .item

  s应自动将包装成2个（在本例中）列，尽可能降低的高度（与基于列的布局相同）

初学者工具包：

.columns {
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
}

.item {
    flex: 0 0 50%; // 50% in this case
    align-self: center;
}

该更改将在不使用Flexbox的情况下为您修复它。你可以在家里看到小提琴

---

将项目样式更改为“上”，即可解决此问题。这是plunker链接：

似乎唯一的方法是使用以下CSS规则：

.columns {
    height: 602px;
}

---

我不知道为什么它会增加额外的间距-使用开发人员工具，我找不到任何导致它的原因。

我认为列框布局（如演示中）的行为是正常的。为什么？为什么144像素的可用空间？如果我将第六个元素的高度增加170px，它会被完美地捕捉。看起来一点也不容易，我认为你可以将赏金增加到1000，这样的赏金是值得的，但是我不认为有人能解决它，你的要求太动态了。我不得不承认，列框布局并没有得到很好的实现。如果这个解决方案可以解决，它应该是与列框布局相关的，我不认为Flex框布局可以解决这个问题（尽管Flex这个名字让我们觉得它非常动态）。如果你只是想让布局看起来很好，这里有一个脚本解决方案，这是为了好玩：）问题是，我真的不明白为什么会有这样的空闲空间。这是不合逻辑的。如果我找到了这个问题的根源，我可能会应用一些CSS技术，看起来还可以。我认为我现在必须坚持使用脚本解决方案（我甚至可以轻松地计算flexbox容器的期望高度），但这是一个非常有趣的问题。最大赏金是500，我将把我的赏金增加到250。：）它实际上不起作用，第六个项目被分成两块，看这个（第六块是红色的）。

display:flex

应该打开

。container

，看赏金初学者工具包。这与使用

display:flex

的结果相同，实际上不起作用。我将稍微修改一下问题，不再有这样的答案了P

.item {
    width: 200px;
    display : flex;
}

.columns {
    height: 602px;
}