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

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寬，並且當內容達到div高時，中間會自動開始滾動？

小提琴：

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;基礎200px; 比設定寬度更靈活

Answer 3

設置min-width:200px; 根據Shaggy的建議評論，左列。

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

有什么理由不行嗎？ 我認為這解決了這個問題。

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

問題描述

3 個解決方案

解決方案1
4 已采納 2015-04-20 19:49:45

解決方案2
2 2015-04-20 19:56:39

解決方案3
0 2015-04-20 19:56:36

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

問題描述

3 個解決方案

解決方案1 4 已采納 2015-04-20 19:49:45

解決方案2 2 2015-04-20 19:56:39

解決方案3 0 2015-04-20 19:56:36

解決方案1
4 已采納 2015-04-20 19:49:45

解決方案2
2 2015-04-20 19:56:39

解決方案3
0 2015-04-20 19:56:36