css 如果任何子节点的flex-shrink为0，为什么inline-flex父节点不获取其子节点的所有宽度

rryofs0p 于 2023-10-21 发布在其他

关注(0)|答案(1)|浏览(102)

这里有一个inline-flex父示例：https://codepen.io/ahuigo/pen/yLQjxew?editors=1010
1.父级有两个子级，并且父级的显示是inline-block。

Child 1的宽度是80 px，Child 2的宽度是40 px。
1.父项的宽度是80 px（为什么不是120 px？）

<div class="parent" style="
    flex-wrap: nowrap;
    display: inline-flex;
    border: 1px solid;
 ">
    <div class="child1" style="flex: 0 0 80px;">child1</div>
    <div class="child2" style="
        width: 40px;
        height: 22px;
        background: #1677ff;
    ">child2</div>
</div>

Q1：为什么inline-flexparent不采用子元素的全宽（120 px）？
Q2：如何让inline-flexparent获取所有子元素的宽度？

css

来源：https://stackoverflow.com/questions/77332318/why-does-inline-flex-parent-not-take-all-width-of-its-children-if-any-childs-fl

1条答案

按热度按时间

vybvopom1#

因为您已经将flex-shrink设置为0，所以宽度为80px的child1已经填充了可用空间**，而不管它的兄弟元素（在本例中为child2）的尺寸如何。
为了防止child1占用父节点的全部空间，只需删除flex: 0 0 80px，并将width: 80px添加到child1：

<div class="parent" style="
    flex-wrap: nowrap;
    display: inline-flex;
    border: 1px solid;
">
    <div class="child1" style="width: 80px;">child1</div>
    <div class="child2" style="
        width: 40px;
        height: 22px;
        background: #1677ff;
    ">child2</div>
</div>

赞(0）回复(0）举报 2023-10-21

我来回答

css 如果任何子节点的flex-shrink为0，为什么inline-flex父节点不获取其子节点的所有宽度

1条答案

相关问题

热门标签

最新问答