我需要这个：
集装箱宽度固定宽度，物料在行方向流动并包裹在末端。
每个项目应该是最大宽度：400px，溢出的内容应该被剪切。
项目的最小宽度应由内容确定，但是它不应短于200px。
这是我的css代码，它不包括“最小内容”方面。最小内容由w3在其flexBox工作草案中提出，但在我的情况下似乎不起作用：
.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>
解决方法
问题是flex：1设置flex-basis：0相反，你需要
.container .Box { min-width: 200px; max-width: 400px; flex-basis: auto; /* default value */ flex-grow: 1; }
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.container .Box {
-webkit-flex-grow: 1;
flex-grow: 1;
min-width: 100px;
max-width: 400px;
height: 200px;
background-color: #fafa00;
overflow: hidden;
}
<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>
