-1

我试图让“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>

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

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

这是一个说明：

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

有任何想法吗？

谢谢

4

1 回答 1

0

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

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

.container {
  display: table;
}

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

.column-content {
  min-width:200px;
}
于 2013-07-16T23:37:05.690 回答