Ziyu Zhou Ziyu Zhou - 5 months ago 22
CSS Question

Why is flex layout affected by its overflow content?

As you can see, a flex box does not break into two part but just display the blue part. If you uncomment the

overflow: hidden
it works as intended.
Why?

The
.nav
content is over the width.



.cont {
width: 200px;
height: 300px;
background-color: red;
display: flex;
}
.aside {
width: 50px;
height: 100%;
background-color: green;
}
.nav {
/*overflow: hidden;*/
flex: 1;
background-color: blue;
}
.info {
max-width: 70%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}
.name {}

<div class="cont">
<div class="aside"></div>
<div class="nav">
<div class="info">
<span class="name"> tes te s dnaosdjw d adondnasjdoqnsnda djj</span>
</div>
</div>
</div>




Answer

Because an initial setting of a flex container is flex-shrink: 1. This means flex items are allowed to shrink, and will do so to prevent overflowing the container.

Your .aside element has no content, so the algorithm shrinks the width to 0 to give the sibling more space and ensure nothing overflows the container.

You can override this setting with flex-shrink: 0 (meaning shrink is disabled).

.cont {
    width: 200px;
    height: 300px;
    background-color: red;
    display: flex;
}

.aside {
    width: 50px;
    height: 100%;
    background-color: green;
    flex-shrink: 0;            /* new */
}

.nav {
    overflow: hidden;
    flex: 1;
    background-color: aqua;    /* adjusted color for readability */
}

.info {
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}
<div class="cont">
    <div class="aside"></div>
    <div class="nav">
        <div class="info">
            <span class="name"> tes te s dnaosdjw d adondnasjdoqnsnda djj</span>
        </div>
    </div>
</div>