CSS 通过内容或 200px（以较大者为准）与 max-width 一起设置 min-width
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29289071/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set min-width either by content or 200px (whichever is greater) together with max-width
提问by Anton Harald
I need this:
我需要这个：
Container width is fixed width, items flowing in the row direction and wrapping at the end.
容器宽度为固定宽度，物品沿行方向流动并在末端包裹。
each item should be max-width: 400px, overflowing content should be cut.
The minimum width of the items should be determined by the content, however: it should never be shorter than 200px.
每个项目都应该max-width: 400px，溢出的内容应该被削减。项目的最小宽度应由内容决定，但是：它永远不应短于200px。
Here is my CSS code, it does not cover the "min-content" aspect. min-content is suggested by the w3 in their Flexbox working draft, but it does not seem to work in my case:
这是我的 CSS 代码，它不包括“最小内容”方面。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;
}
and the HTML is:
和 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>
回答by Oriol
The problem is that flex: 1sets flex-basis: 0. Instead, you need
问题是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>