根据显示弹性框中的子级设置父级高度/宽度

Posted 2023-03-06

【中文标题】根据显示弹性框中的子级设置父级高度/宽度

【英文标题】：set parent height/width according to child in display flexbox

【发布时间】：2015-08-17 19:56:32

【问题描述】：

我正在使用 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 找出宽度并设置父宽度？

请您建议按照 div 的最大高度排列项目的最佳做法。

【问题讨论】：

明显的错字：. parent（删除空格）。 Flexbox不好用，我已经设置了little toy to play around with it，如果可以帮助到你。

去掉.和parent之间的空格。

@JeremyThille ya 错字有问题，但不是我的解决方案..谢谢！！

你期望的输出是什么？

@ketan 我想设置父 div 高度/宽度自动，我更新了我的问题。

【参考方案1】：

以下是您需要解决的几个问题。根据您的风格，“.child”是弹性容器，<li> 元素是弹性项目。

<li> 不能嵌套在 <div> 中。需要配合<ul>或<ol>使用。

我认为你的“.child”是容器弹性盒子。如果您使用的是 IE11，则可以 "display:-ms-flexbox" 工作（不是 display:flex）（display:flexbox 在 IE11 中无效）

删除“最大高度：50px;”它限制了容器框（.child）的大小。你包含<li>。您将 flex-direction 设置为 column，因此 <li> 元素将从上到下列出。然后您可以删除（.parent 宽度和高度。）

现在，如果您试图让 .child 的大小等于其元素的大小，那么您需要查看子元素的更多 margin:0px 和 display:inline-block 属性。