flex-shrink only the widest parts to some percentage, then shrink equally

user_793320 0
Viewed 89

Imagine there's some breadcrumb bar - a line with various count of links, each link has ellipsis, and it should shrink if overflow.

Overflow should be smart - if there're 5 links, and 2 links are much wider than others, they have to be shrinked to 20%, and 3 short links should stay as they are.

If one link is much wider, and the rest 4 links are short, and they fit, then no shrink should happen. The widest link should not shink to 20% if the overall width is enough.

I'm trying different approaches but could not find one that fits these (natural) requirements. Is it possible to achieve without JavaScript?

I tried various combinations of flex-basis & min/max width, but no success yet:

https://jsfiddle.net/kasheftin/5k31fr4u/

.breadcrumbs {
  width: 300px;
  display: flex;
  align-items: center;
  border: 1px solid #000;
  margin: 0 0 50px 0;
  padding: 5px;
}

.breadcrumb-separator {
  flex: 0 0 auto;
  margin: 0 5px;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb1 {
  flex: 0 1 auto;
}

.breadcrumb2 {
  flex: 0 1 25%;
}

.breadcrumb2 {
  flex: 0 1 50%;
}

.breadcrumb4 {
  flex: 0 1 auto;
  max-width: 25%;
}
<div class="breadcrumbs">
  <a href="#" class="breadcrumb1 ellipsis">
    SomeLongTitleGoesHereAndItsTooWideToFit
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb1 ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb1 ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb1 ellipsis">
    Short
  </a>
</div>

<div class="breadcrumbs">
  <a href="#" class="breadcrumb2 ellipsis">
    SomeLongTitleGoesHereAndItsTooWideToFit
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb2 ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb2 ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb2 ellipsis">
    Short
  </a>
</div>

<div class="breadcrumbs">
  <a href="#" class="breadcrumb3 ellipsis">
    SomeLongTitleGoesHereAndItsTooWideToFit
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb3 ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb3 ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb3 ellipsis">
    Short
  </a>
</div>

<div class="breadcrumbs">
  <a href="#" class="breadcrumb4 ellipsis">
    SomeLongTitleGoesHereAndItsTooWideToFit
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb4 ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb4 ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb4 ellipsis">
    Short
  </a>
</div>

enter image description here

flexbox css html
2 Answers

It would be easier if you can add a class dynamically according to the length of the text content.

In that case, only give flex-shrink to those are too wide:

.breadcrumbs {
  width: 300px;
  display: flex;
  align-items: center;
  border: 1px solid #000;
  margin: 0 0 50px 0;
  padding: 5px;
}

.breadcrumb-separator {
  flex: 0 0 auto;
  margin: 0 5px;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb {
  flex: 0 0 auto;
}

.breadcrumb.long {
  flex-shrink: 1;
}
<div class="breadcrumbs">
  <a href="#" class="breadcrumb ellipsis long">
    SomeLongTitleGoesHereAndItsTooWideToFit
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb ellipsis">
    Short
  </a>
</div>

user_102892650

Try this example with additional max-width: min-content; in the .breadcrumb class and some flex property changes. Without extra classes.

.breadcrumb-separator {
  flex: 1 0 auto; /* changed */
  margin: 0 5px;
}

.breadcrumb {
  max-width: min-content; /* new line */
  flex: 0 1 100%; /* changed */
}


.breadcrumbs {
  width: 300px;
  display: flex;
  align-items: center;
  border: 1px solid #000;
  margin: 0 0 50px 0;
  padding: 5px;
}

.breadcrumb-separator {
  flex: 1 0 auto; /* changed */
  margin: 0 5px;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb {
  max-width: min-content; /* new line */
  flex: 0 1 100%; /* changed */
}
<div class="breadcrumbs">
  <a href="#" class="breadcrumb ellipsis">
        SomeLongTitleGoesHereAndItsTooWideToFit
      </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb ellipsis"> Short </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb ellipsis"> Short </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb ellipsis"> Short </a>
</div>

user_155451160
Related