Why is flex layout affected by its overflow content?

Question

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>

Michael Benjamin · Accepted Answer · 2016-06-29T12:42:26.523

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>

thx, now I know the reason why .aside element shrink. Another question is if I remove overflow:hidden from the .nav element. It's width will be larger than 150px. it expands! Why? — Ziyu Zhou, Jun 27 '16 at 14:46
Because a flex item, by default, cannot be smaller than its content. The initial size of a flex item is `min-width: auto`. You can override this with `min-width: 0`: https://jsfiddle.net/eoy4saty/ — Michael Benjamin, Jun 27 '16 at 14:56

Why is flex layout affected by its overflow content?

1 Answers1