How the width of a inline-flex div is decided?

Question

for an inline-flex div, the width is depending on its children elements' width. Here is the code, I don't set the parent div with specified width. So, it is decieded by inside elements.

For the three children elements, one is with width:50%, others are width:50px, but the final width for 2 is 31.75, how does it come?

    <div style="display: inline-flex;flex-wrap: nowrap;">
        <div style="width:50%;color:red">1</div>
        <div style="width:50px;color:blue">2</div>
        <div style="width:50px;color:black">3</div>
        <span>hello</span>
    </div>

score 2 · Accepted Answer · answered Sep 29 '21 at 11:35

Here is a step by step illustration to understand what the browser is doing:

div div {
 outline:1px solid green
}

<p>The browser will first ignore the width:50% and use auto instead</p>
<div style="display: inline-flex;flex-wrap: nowrap;border:2px solid red">
    <div style="width:auto;color:red">1</div>
    <div style="width:50px;color:blue">2</div>
    <div style="width:50px;color:black">3</div>
    <span>hello</span>
</div>
<p>Now that we have the width of the parent, it will no more change and we resolve width:50%</p>
<div style="display: inline-flex;flex-wrap: nowrap;border:2px solid red">
    <div style="width:50%;color:red">1</div>
    <div style="width:50px;color:blue">2</div>
    <div style="width:50px;color:black">3</div>
    <span>hello</span>
</div>
<p>all the div will shrink because there is not enough space for them (50% + 50px + 50px + hello > 100%). A shrink that you can disable if you use flex-shrink:0 and you will have overflow</p>
<p>Only "hello" will not shrink because a flex item cannot shrink past its content size</p>
<div style="display: inline-flex;flex-wrap: nowrap;border:2px solid red">
    <div style="width:50%;color:red;flex-shrink:0;">1</div>
    <div style="width:50px;color:blue;flex-shrink:0;">2</div>
    <div style="width:50px;color:black;flex-shrink:0;">3</div>
    <span>hello</span>
</div>

For more detail about the shrink algorithm if you want to understand the calculation:

How flexbox calculates flex-item's width if no flex-basis or width are set?

Why is a flex item limited to parent size?

To understand why "hello" will not shrink:

Why don't flex items shrink past content size?

The purple area you see in the dev tools is the width before the shrink effect. You can notice it's equal to 50px for the 2nd and 3rd div

How the width of a inline-flex div is decided?

1 Answers1