Question

我在向中心div添加大量文字时，底部div变宽了。

HTML：

<body>

<div class="k-box k-flex k-flex-row black k-flex-item">
    <div class="k-box cyan" style="width: 200px;">
        <div class="k-box" style="height: 100%;">Left which should always be 200px!</div>
    </div>
    <div class="k-box k-flex k-flex-column  k-flex-item">
        <div class="k-panel k-flex k-flex-column  k-flex-item">
            <div class="k-box k-flex-item" style="">When the text is short it works!</div>
        </div>
    </div>
    <div class="k-box green" style="width: 200px;">right</div>
</div>

<br />

<div class="k-box k-flex k-flex-row k-flex-item" style="">
    <div class="k-box cyan" style="width: 200px;">
        <div class="k-box" style="height: 100%;">Left which should always be 200px!</div>
    </div>
    <div class="k-box k-flex k-flex-column k-flex-item">
        <div class="k-panel k-flex k-flex-column  k-flex-item">
            <div class="k-box k-flex-item">When long... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vehicula ante eget aliquam semper. Vestibulum aliquam rhoncus sem nec tristique. Aenean sagittis turpis tellus, asemper tellus laoreet eu. Suspendisse condimentum auctor sapien eget ullamcorper. In a efficitur neque, vel ullamcorper nulla. Vestibulum sed suscipit neque. Ut in blandit erat. Aliquam sed feugiat nulla, vel porttitor tortor. Curabitur interdum turpis et dolor lobortis, non eleifend diam ornare. In sem nisi, egestas eget nisl ac, lobortis tristique sem.</div>
        </div>
    </div>
    <div class="k-box green" style="width: 200px;">right</div>
</div>

</body>

CSS

div.k-flex {
    border: solid 1px red;
}

.k-box {
    position: relative;
}

.k-flex {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.k-flex-item {
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.k-flex-row {
    flex-direction: row;
    -webkit-flex-direction: row;
}

.k-flex-column {
    flex-direction: column;
    -webkit-flex-direction: column;
}

如何让底部div中的左右列保持200px宽，并且当内容越来越高时，中间会自动开始滚动？

小提琴：

http://jsfiddle.net/eugfcLo2/1/

Answer 1

所以Flexbox的重点是灵活，所以说总是200px 之类的东西是你不想用Flexbox做的事情。您可以通过设置宽度/最大宽度来，但最好的办法是使用flex-basis。因此，如果将flex基础设置为200px，那些列将尽力为200px。如果布局需要它们（在这种情况下当窗口太小时）它们仍会弯曲，但一般来说它们将保持200px。

示例：

.k-flex {
    display: flex;
    height: 150px;
}
.k-flex-item {
    flex: 1 1 200px; /* flex basis is the third property */
    overflow: auto;
}

更新的小提琴：http://jsfiddle.net/gj21nyh0/

（我还在父级上添加了这个高度，以便更容易看到滚动的工作方式）

更新：，如下面指出的val，第二个值是 flex-shrink ，如果将其设置为0，那么它会使主列不会缩小到低于flex的基础。根据您的布局需要，可能会有用。谢谢你们！

Answer 2

缺少的属性为flex-shrink

如果将其设置为0，则告诉flex系统您不希望缩小初始大小。

将其与width: 200px一起设置，它将起作用。

但通常的做法是将flex: 1 0 200px;此设置增长设为1，缩小为0，并将基础设置为200px;更多 flex 而不是设置宽度

Answer 3

根据Shaggy的建议评论，为左栏设置min-width:200px;。

http://jsfiddle.net/eugfcLo2/6/

为什么这不起作用？我认为这解决了这个问题。

Flex布局不符合固定列的宽度

3 个答案: