如何将min-width、fit-content与固定宽度结合设置？

我有一个flex容器，内部包含两个子元素，这些子元素已设置overflow-x: hidden和text-overflow: ellipsis，确保长文本会被截断。我希望为这些子元素设置宽度规则：若文本较长，最小宽度为固定值100px；若文本本身宽度小于100px，则使用fit-content（或等效属性）。能否通过一条min-width规则同时结合fit-content和100px，取两者中的较小值？

现有代码 #

CSS代码 #

.blue {
  max-width: 600px;
  display: flex;
  gap: 2px;
  padding: 2px;
  box-sizing: border-box;
  border: 2px blue solid;
  margin-bottom: 2px;
}  

.blue > .red {
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  border: 2px red solid; 
  padding: 10px;
}  

.blue > .red.second {
  min-width: 100px;
  /* min-width: fit-content; */
  /* min-width: min(fit-content, 5rem); */
}

HTML代码 #

<div class="blue">
  <div class="red first">
    Some little bit longer text as an example
  </div>
  <div class="red second">
    Another shorter example
  </div>
</div>

<div class="blue">
  <div class="red first">
    Short text
  </div>
  <div class="red second">
    text
  </div>
</div>

解决方案 #

完全可以通过CSS的min()函数实现这个需求，只需将目标元素的min-width设置为min(fit-content, 100px)：

.blue > .red.second {
  min-width: min(fit-content, 100px);
}

这个规则的作用逻辑是：

• 当文本内容的自然宽度小于100px时，min()会选取fit-content，元素宽度自动适配内容；
• 当文本内容的自然宽度超过100px时，min()会选取100px作为最小宽度，同时因为元素已经设置了overflow-x: hidden和text-overflow: ellipsis，超出部分的文本会被截断并显示省略号。

min()函数属于CSS比较函数，现代主流浏览器均已支持，兼容性无需担忧。

内容的提问来源于stack exchange，提问作者Jan Stanicek