html – FLEXBOX min-width：min-contentmax-width

概述我需要这个： 集装箱宽度固定宽度，物料在行方向流动并包裹在末端。 每个项目应该是最大宽度：400px，溢出的内容应该被剪切。 项目的最小宽度应由内容确定，但是它不应短于200px。 这是我的css代码，它不包括“最小内容”方面。最小内容由w3在其flexbox工作草案中提出，但在我的情况下似乎不起作用： .container { display: -webkit-flex; dis 我需要这个：

集装箱宽度固定宽度，物料在行方向流动并包裹在末端。

每个项目应该是最大宽度：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 >    <div >        <table>            <tr>                <td>Content</td>                <td>Content</td>                <td>Content</td>            </tr>        </table>        </div>    <div >        <table>            <tr>                <td>Content</td>            </tr>        </table>        </div>    <div >        <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 >  <div >    <table>      <tr>        <td>Content</td>        <td>Content</td>        <td>Content</td>      </tr>    </table>      </div>  <div >    <table>      <tr>        <td>Content</td>      </tr>    </table>      </div>  <div >    <table>      <tr>        <td>Content</td>        <td>Content</td>      </tr>    </table>      </div></div>

总结

以上是内存溢出为你收集整理的html – FLEXBOX min-width：min-content/max-width全部内容，希望文章能够帮你解决html – FLEXBOX min-width：min-content/max-width所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。