Why does the width property affect the flex-item even though flex-basis is set?

Question

I have tried a little bit with flex-box and I don't understand something about it. Until now I thought that the value of the width property of a flex-box item doesn't matter as long as the flex-basis is set. I found this claim also in this Blog. But if I remove the width property of the div element, the result changes. Why? What exactly happens here?

flex-basis: 40px; and width: 40px; of div element set

flex-basis: 40px; and width: 40px; of div element not set

I also created a jsfiddle.

*flex-basis: 40px;* and *width: 40px;* of div element set:

*
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
}

section
{
    display: inline-block;
}

ol
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    
    background-color: gray;
}

li
{
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    
    background-color: greenyellow;
}

a
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

div /* Icon Placeholder */
{
    flex-basis: 40px;
    flex-grow: 0;
    flex-shrink: 0;

    width: 40px;
    height: 40px;
    
    background-color: red;
}

p
{
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 0;
}

<section>
    <ol>
        <li><a href="#"><div></div><p>The birch canoe slid on the smooth planks.</p></a></li>
        <li><a href="#"><div></div><p>Glue the sheet to the dark blue background.</p></a></li>
        <li><a href="#"><div></div><p>It's easy to tell the depth of a well.</p></a></li>
        <li><a href="#"><div></div><p>These days a chicken leg is a rare dish.</p></a></li>
        <li><a href="#"><div></div><p>Rice is often served in round bowls.</p></a></li>
    </ol>
</section>

*flex-basis: 40px;* and *width: 40px;* of div element not set:

*
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
}

section
{
    display: inline-block;
}

ol
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    
    background-color: gray;
}

li
{
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    
    background-color: greenyellow;
}

a
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

div /* Icon Placeholder */
{
    flex-basis: 40px;
    flex-grow: 0;
    flex-shrink: 0;

    height: 40px;
    
    background-color: red;
}

p
{
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 0;
}

<section>
    <ol>
        <li><a href="#"><div></div><p>The birch canoe slid on the smooth planks.</p></a></li>
        <li><a href="#"><div></div><p>Glue the sheet to the dark blue background.</p></a></li>
        <li><a href="#"><div></div><p>It's easy to tell the depth of a well.</p></a></li>
        <li><a href="#"><div></div><p>These days a chicken leg is a rare dish.</p></a></li>
        <li><a href="#"><div></div><p>Rice is often served in round bowls.</p></a></li>
    </ol>
</section>

Answer 1

You have set flex-direction: row; on the containing anchor element which means that the flex-basis will be the width of the row.

You have set the flex-basis as well as the width on the div element inside that parent element. Note that changing the width on those div elements does not change the width of the div, which you see in your screenshot as well. It says the expected 40px, because you also set flex-grow to 0. A handy shorthand is btw flex: [grow] [shrink] [basis].

So what is happening now: All parent elements of your div with the basis are growing, because they have width: auto; by default, this affects the containing a element as well as the li. In return, the neighbouring element of the div, the p with a green background, also fills its parent container, because it has no flex-basis and width: auto as well.

So why is this happening? You can see that when you add e.g. 10px of width to your div, that the container grows 10px accordingly and as a block element the p tag tags up the new remaining space. This is a nested flex, which is known to have some bugs - I am not sure this is one of them or expected behavior, but the parent element grows based on the width that you set and not on the actual it takes up in the dom or the flex-basis.

As a general hint: Maybe look into css grid for more complex, nested layouts.