CODEWITHSUNDEEP
htmlcssflexbox
Ziyu Zhou
Ziyu Zhou

Reputation: 1719

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>

Upvotes: 2

Views: 434

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371003

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>

Upvotes: 2

Related Questions