将最小宽度设置为内容宽度和200像素中的较大值，并结合最大宽度。

Question

我需要这个：

容器宽度是固定的，项目在行方向上流动并在末尾换行。

每个项目应该是max-width: 400px，溢出的内容应该被裁剪。 项目的最小宽度应由内容确定，但是：它永远不能小于200px。

这是我的CSS代码，它没有涵盖“min-content”方面。 min-content建议在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>

- Anton Harald

Answer 1

问题在于 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>

- Oriol

---

这个线程非常好地解释了flex-basis: 0和flex-basis: auto之间的区别：https://dev59.com/kFcP5IYBdhLWcg3w_e12 - Paul Razvan Berg