如何设置绝对定位元素宽度为容器80%与max-content的较小值？

首先明确基础布局：.container 设置为相对定位，.my-element 为绝对定位。要实现「宽度不超过容器80%，同时不超过内容本身宽度」的效果，有两种可行方案：

方案一：直接使用现代CSS的min()函数 #

现在绝大多数现代浏览器已经支持在min()中使用max-content，可以直接写：

.container {
  position: relative;
  /* 可添加容器的宽高、内边距等样式 */
}

.my-element {
  position: absolute;
  width: min(80%, max-content);
  /* 可添加其他样式如背景、内边距等 */
}

这个写法最直观，完全匹配你想要的min(80%, max-content)逻辑。

方案二：兼容旧浏览器的替代写法 #

如果需要兼容不支持max-content在min()中使用的旧浏览器，可以通过**max-width+默认宽度收缩**实现等效效果：

.container {
  position: relative;
}

.my-element {
  position: absolute;
  max-width: 80%; /* 限制最大宽度为容器的80% */
  width: auto; /* 让元素宽度默认收缩到内容宽度 */
  /* 也可以直接不设置width，绝对定位元素默认宽度就是内容宽度 */
}

原理是：绝对定位元素未显式设置width时，会自动收缩以适应内容（等同于width: max-content的效果），再通过max-width:80%限制最大宽度，最终自动取「容器80%宽度」和「内容本身宽度」中的较小值。

你可以根据目标浏览器的兼容性需求选择对应的方案，两种写法都能达到预期效果。

内容的提问来源于stack exchange，提问作者Luca Reghellin