Search code examples
htmlcssflexboxellipsis

Nested flex containers with overflow and ellipsis not working

I have trouble getting text-overflow: ellipsis and overflow: hidden working the way I need it.

Basically, I need to get the left div with class item1 and text "Please truncate me" to shrink as the width of the container decreases so that both item1 and item2 are on the same row.

No matter what I try I end up with the row overflowing and it never shrinks.

Tried various solutions from here but didn't manage to get any working the way I need.

.mainwrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
  max-width: 800px;
  width: 100%;
  height: 400px;
  background-color: red;
}

.top-container {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  height: 80%;
  background-color: cyan;
}

.title {
  background-color: white;
}

.table-container {
  display: table;
}

.skills-container {
  width: 100%;
  display: block;
  background-color: green;
}

.skill-row {
  width: 100%;
  display: flex;
  justify-content: start;
  background-color: blue;
}

.item1 {
  display: flex;
  flex-wrap: nowrap;
}

.item2 {
  flex-shrink: 0;
  display: flex;
  flex-wrap: nowrap;
}

.item-content {
  display: flex;
}

.item-details {
  display: flex;
}

.text1 {
  display: inline-block;
  white-space: nowrap;
  background-color: yellow;
}

.small-button {
  display: flex;
  height: 50px;
  width: 50px;
  background-color: green;
}

.overflow-toverflow {
  overflow: hidden;
  text-overflow: ellipsis;
}

.flex-w {
  flex-wrap: wrap;
}

.flex-nw {
  flex-wrap: nowrap;
}

.flex-min {
  flex: 1 1 auto;
  min-width: 0;
}

.flex-sh-0 {
  flex-shrink: 0;
}

.min0 {
  min-width: 0;
}
<div class="mainwrapper">
  <div class="content flex-min">
    <div class="top-container flex-min">
      <div class="title">Your skills</div>
      <div class="table-container">
        <div class="skills-container">
          <div class="skill-row flex-nw flex-min">
            <div class="item1 flex-min">
              <div class="item-content">
                <div class="small-button"></div>
                <div class="text1 overflow-toverflow">Please truncate me! Please truncate me!Please truncate me!Please truncate me!Please truncate me!Please truncate me</div>
              </div>
            </div>
            <div class="item2 flex-sh-0">
              <div class="small-button"></div>
              <div class="text1">Relevance: None Whatsoever None</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

codepen: https://codepen.io/Tiartyos/pen/Ljxyqr

Solution

  • An initial setting on flex items is min-width: auto. This means that, by default, an item cannot shrink below the size of its content. This prevents the ellipsis from rendering since the item simply expands to accommodate all content.

    Most of your flex items have the necessary min-width: 0 override applied. But not all of them.

    Also, flex and table properties don't play well together. Mixing them can break a flex layout, which appears to be happening in your case.

    With the following adjustments, your layout seems to work.

    .table-container {
  /* display: table; */
  min-width: 0; /* NEW */
}

.item-content {
  display: flex;
  min-width: 0; /* NEW */
}

    revised codepen

    More information:

    (This post would be a duplicate of this link, if it weren't for the display: table matter.)