Question

我列出了从上到下分成多列的项目列表。因此，当我添加更多项目时，flexbox会自动调整其宽度。但是父内联块div并没有被这个子弹性框拉伸。看起来像CSS中的一个bug给我。

你可以在这个小提琴里看到它： 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;
}

Answer 1

看起来这真的是一个错误。有关详细信息，请参阅此问题。 https://code.google.com/p/chromium/issues/detail?id=247963 （这在chrome和firefox中都是相同的行为）。我想我现在就关闭它，直到他们解决它。

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

1 个答案: