小编Ant*_*ald的帖子

我需要这个:

容器宽度固定宽度,物品在行方向流动并在末端包裹.

每个项目应该是max-width: 400px,应该削减溢出的内容.项目的最小宽度应由内容决定,但:它不应小于200px.

这是我的CSS代码,它没有涵盖"min-content"方面.w3在他们的flexbox工作草案中建议使用min-content,但在我的情况下它似乎不起作用:

.container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.container .box {
    -webkit-flex: 1;
    flex: 1;
    min-width: 200px;
    max-width: 400px;
    height: 200px;
    background-color: #fafa00;
    overflow: hidden;
}

和HTML是:

<div class="container">
    <div class="box">
        <table>
            <tr>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
            </tr>
        </table>    
    </div>
    <div class="box">
        <table>
            <tr>
                <td>Content</td>
            </tr>
        </table>    
    </div>
    <div class="box">
        <table>
            <tr>
                <td>Content</td>
                <td>Content</td>
            </tr>
        </table>    
    </div>
    [...]
</div>