在显示flexbox中根据孩子设置父高度/宽度

Question

我使用Flexbox，但似乎有一个问题，当我尝试设置父div的高度/宽度为自动。

Flexbox指南，

.parent {
    background: #000;
    width:100px;     /* I WANT TO SET THIS AUTO ** NOT FIX 100PX** */
    height:100px;    /* I WANT TO SET THIS AUTO ** NOT FIX 100PX** */
}

.child {
    display: flex;
    color:white;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 50px;
    list-style:none;
}

<div class="parent">
    <div class="child">
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
    </div>
</div>

我也试试这个，

.parent {
    background: #000;
    flex:1;
}

但它只给一行子项上色，

根据子记录宽度设置父背景颜色存在问题，如何使用Flexbox设置自动宽度。

是否可以使用JavaScript找出宽度并设置父宽度？

请您建议最佳做法，按照分区的最大高度来安排项目。

Answer 1

以下是您需要解决的几个问题。根据您的风格，.child是flex容器，

>

我想你“.child”是一个容器弹性盒。如果您使用的是IE11，您可以“显示：-ms flexbox”工作（不显示：flex）（显示：flexbox在IE11中不起作用）

删除“最大高度：50px它限制容器盒（.child）的大小。您正在包含

现在，如果您试图让. zi的大小等于其元素的大小，那么您需要查看更多的边距： 0px和子元素的显示：内联块属性。