Css 固定高度的Flexbox列布局包裹不'；t拉伸父内联块容器

我正在列出一个项目列表，这些项目从上到下排列成多列。 因此，当我添加更多项目时，flexbox会自动调整其宽度。 但是父内联块div不会被子flexbox拉伸。 对我来说，似乎是CSS中的一个bug

你可以在这把小提琴上看到它：

HTML:

---

看起来它真的是一只虫子。 有关更多信息，请参阅本期。 （这在chrome和firefox中都是相同的行为）。

---

我想我会暂时关闭它，直到他们修复它。

看起来它真的是一个bug。 有关更多信息，请参阅本期。 （这在chrome和firefox中都是相同的行为）。

---

我想我会暂时关闭它，直到他们修复它。

只是好奇，为什么容器上的

内联块

？说到这里，为什么要有一个容器呢？好吧，这是设计：一个边栏（容器）有一个“位置：绝对”，主栏有一个相应的“右边距”。也许有更好的方式来展示整个内容。我可以和我们的设计师商量一下。也许我们可以把侧边栏放在主要内容的顶部。不过，右边看起来更漂亮。如果您希望它是内联级别的，还有

display:inline flex

。只是好奇，为什么容器上有

inline block

？说到这里，为什么要有一个容器呢？好吧，这是设计：一个边栏（容器）有一个“位置：绝对”，主栏有一个相应的“右边距”。也许有更好的方式来展示整个内容。我可以和我们的设计师商量一下。也许我们可以把侧边栏放在主要内容的顶部。不过，右边看起来会更漂亮。如果您希望它是内联级别的，还有

display:inline flex

。

<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>

.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;
}