Question

我正在尝试将“FlexBox”列拉伸并挤压以填充水平空间，但使用小尺寸的水平滚动以便不裁剪其内容。

我所做的是创建一个容器元素，其布局超出了自动溢出的flexbox方向，方向等：

.container {
    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+ */

    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;

    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    overflow:auto;
}

我有一栏：

.column {
    overflow:hidden;
    min-width:100px;
}

列中的内容：

.column-content {
    min-width:200px;
}

这是HTML：

<div class="container">

    <div class="column">
        <div class="column-content">...</div>
    </div>

    <div class="column">
        <div class="column-content">...</div>
    </div>

    <div class="column">
        <div class="column-content">...</div>
    </div>

    <div class="column">
        <div class="column-content">...</div>
    </div>

</div>

当您将视口水平缩放时，列将一直缩小到100px，即它们的最小宽度。但我希望他们做的不是缩小超过200px，他们的内容的最小宽度。

我不能将min-width列设置得更高，因为我不知道这些列的内容是什么样的，以及它们的最小宽度是什么，因为不同的组件将被加载到那里。

这是一个插图说明：

http://plnkr.co/edit/CoIYdHXQVnAYzSp5m1tG?p=preview

有什么想法吗？

由于

Answer 1

表格显示属性更适合此任务（并且具有更好的浏览器支持）：

http://cssdeck.com/labs/0jrgaysm

.container {
  display: table;
}

.column {
  overflow:hidden;
  min-width:100px;
  display: table-cell;
}

.column-content {
  min-width:200px;
}

CSS FlexBox使用最小尺寸裁剪内容

1 个答案: