I created .container flex container that includes 2 flex items:

• first item .fixed-item has absolute width (width: 120px;)

• second one .varied-item has relative width (width: 100%; max-width: 1000px;)

Also each .varied-item contains .content block with overflow: hidden; which in turn has some long text. And here begins troubles: if .content block has fixed width (in this case width: 300px;) everything works as expected (flex item .varied-item is placed inside the container) but if this block is relatively sized (width: 100%;) its parent .varied-item is overflowing flex container.

For this case I created a demo: Codepen demo

Main code from the demo:

.container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    background: red;
    padding: 10px;
}
.fixed-item {
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
    background: yellow;
}
.varied-item {
    width: 100%;
    max-width: 1000px;
    background: blue;
    padding: 10px;
}
.content {
    height: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: lightgreen;
}
.content-fixed {
    width: 300px;
}
.content-relative {
    width: 100%;
}

<div class="container">
    <div class="fixed-item"></div>
    <div class="varied-item">
        <p class="content content-fixed">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
            ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
            sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
            laborum.
        </p>
    </div>
</div>

<div class="container">
    <div class="fixed-item"></div>
    <div class="varied-item">
        <p class="content content-relative">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
            ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
            sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
            laborum.
        </p>
    </div>
</div>

Interesting observation: if “initial” width of the content is small enough then .varied-item is not overflowed.

Note: I know that adding min-width: 0; to .varied-item element solves the problem and I saw many similar questions but all of the answer not clear for me and hence seems like not exactly the same for me.

Answer: can someone explain me how flex item width is calculated in fixed/relative/small-enough content width cases and why min-width: 0; solves the problem? It would be great if the answer will be based on specification with explanation.

Thank for help ahead of time.