具有固定高度的 Flexbox 列布局包装不会拉伸父内联块容器答案

【问题标题】：Flexbox column layout wrap with fixed height doesn't stretch the parent inline-block container具有固定高度的 Flexbox 列布局包装不会拉伸父内联块容器
【发布时间】：2015-07-14 14:37:30
【问题描述】：

我正在列出从上到下飞行到多个列中的项目列表。因此，当我添加更多项目时，flexbox 会自动调整其宽度。但是父 inline-block div 并没有被这个子 flexbox 拉伸。对我来说似乎是 CSS 中的一个错误。

您可以在这个小提琴中自己看到它： https://jsfiddle.net/dnc8h57n/

HTML：

<div class="container">
    <div class="flexbox">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

还有 CSS：

.child {
    display: inline-block;
    width: 100px;
    min-height: 100px;
    height: 100px;
    background-color: #e46119;
    border: 1px solid #626262;
    margin: 3px;
    flex: 1;
}

.flexbox {
    display: -webkit-flex;
    display: flex;

    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;

    flex-direction: column;
    -webkit-flex-direction: column;

    justify-content: flex-start;
    -webkit-justify-content: flex-start;

    align-items: flex-start;
    -webkit-align-items: flex-start;

    height: 400px;
    background-color: #dce7f2;
    border: 1px solid #2a4f73;
}

.container {
    display: inline-block;
}

【问题讨论】：

只是好奇，为什么inline-block 在容器上？说到这里，为什么要有一个容器？
嗯，它的设计：一个侧边栏（容器）有一个“位置：绝对”，主列有一个相应的“margin-right”。
也许有更好的方法来布置整个事情。我可以咨询我们的设计师。
也许我们可以将侧边栏放在主要内容的顶部。不过，在右侧看起来会更漂亮。
如果您希望它是内联级别，还有 display:inline-flex。

标签： css flexbox

【解决方案1】：

看起来这确实是一个错误。有关更多信息，请参阅此问题。 https://code.google.com/p/chromium/issues/detail?id=247963 （在 chrome 和 firefox 中的行为相同）。我想我会暂时关闭它，直到他们修复它。

【讨论】：