FLEXBOX min-width：min-content / max-width

Question

我需要這個：

容器寬度固定寬度，物品在行方向流動並在末端包裹。

每個項目應該是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>

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>