如何在使用CSS3列时摆脱WebKit添加的填充？ （加奖金赏金）

Question

我尝试使用 CSS3 columns （仅适用于WebKit）创建两列网格状布局。

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

我非常基本的CSS看起来像这样：

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

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

如何摆脱空间，以便父容器（红色）以第6个项目结束？

我的要求是什么以及我想要达到的目标：

• .container 必须具有灵活的高度。
• .container 必须结束完全，其中最低.item结束。
• .item 不得分成碎片。

---

+250 FLEXBOX BONUS BOUNTY

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

无论谁使用Flexbox提供解决方案，最高可达+250 。再次，我的要求：

• .container必须具有固定宽度，灵活高度。
• .container应该有确切数量的列（在这种情况下为两个）。
• .item应自动 分为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;
}

Answer 1

.item {
    display: block;
}

如果不使用Flexbox，该更改将为您解决此问题。您可以在http://jsfiddle.net/9bj3j/找到小提琴。

Answer 2

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

将项目样式更改为上面，它可以解决问题。以下是plunker链接：http://plnkr.co/edit/MiytJAk1f1104dRyLGBy?p=preview

Answer 3

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

.columns {
    height: 602px;
}

我不确定为什么会增加额外的间距 - 使用开发者工具，我无法找到导致它的任何内容。