html - flex-shrink 仅将最宽的部分缩小到一定百分比，然后同样缩小

Question

假设有一些面包屑栏 - 一行包含各种链接数，每个链接都有省略号，如果溢出它应该缩小。

溢出应该很聪明 - 如果有 5 个链接，其中 2 个链接比其他链接宽得多，它们必须缩小到 20%，而 3 个短链接应保持原样。

如果一个链接更宽，而其余 4 个链接很短，并且它们适合，则不应发生收缩。如果整体宽度足够，最宽的链接不应收缩到 20%。

我正在尝试不同的方法，但找不到适合这些(自然)要求的方法。没有JavaScript可以实现吗？

我尝试了 flex-basis 和最小/最大宽度的各种组合，但还没有成功:

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>

Answer 1

在 .breadcrumb 类中使用附加的 max-width: min-content; 和一些 flex 属性更改来尝试此示例。没有额外的类(class)。

.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>