Question

我有一个弹性布局，可以将两个fieldset并排放置。

我希望字段集平均划分空间，即使其中之一的非包装内容太宽也是如此。（它应该是隐藏的。）

我对此问题进行的所有搜索都表明flex子级需要应用max-width。就我而言，这不起作用（如下面的代码段和echoed on CodePen中所示）。

为什么字段集的宽度超过50％？如何使字段集保持50％的宽度，以及如何在ul内裁剪项目列表？

* { box-sizing:border-box }
#content {
    display:flex;
}
fieldset {
    flex: 1;
    max-width:50%;
}
#items {
    list-style-type:none;
    white-space:nowrap;
    overflow:hidden;
    max-width:100%;
}
#items li {
    display:inline-block;
    width:100px; height:90px;
    background: yellow;
    text-align:center;
    line-height:90px;
}

<div id="content">
    <fieldset id="left"><legend>SECTION 1</legend>
    </fieldset>        
    <fieldset id="right"><legend>SECTION 2</legend>
        <ul id="items">
            <li>AAA</li>
            <li>BBB</li>
            <li>CCC</li>
            <li>DDD</li>
            <li>EEE</li>
            <li>FFF</li>
            <li>GGG</li>
            <li>HHH</li>
            <li>III</li>
            <li>JJJ</li>
            <li>KKK</li>
            <li>LLL</li>
            <li>MMM</li>
            <li>NNN</li>
            <li>OOO</li>
        </ul>
    </fieldset>
</div>

字段集弹性项目的最大宽度不适用

0 个答案: