如何让容器根据相对与绝对定位子元素设置最大宽度？

针对你遇到的问题——让自定义Select的可见部分宽度适配下拉菜单中最宽的内容（比如示例中的"elephant"），可以通过以下几种现代CSS方案解决：

方案1：利用content-visibility特性保留布局空间 #

绝对定位的下拉菜单如果用display: none会完全脱离布局计算，改用content-visibility: hidden可以保留其布局尺寸，让容器自动适配最宽内容：

.select-container {
  position: relative;
  display: inline-block; /* 容器宽度由内容决定 */
}

.select-visible {
  padding: 4px 8px;
  border: 1px solid #ddd;
  background: #fff;
}

.select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #ddd;
  background: #fff;
  content-visibility: hidden; /* 默认隐藏但保留布局 */
}

.select-container.open .select-dropdown {
  content-visibility: visible; /* 展开时显示内容 */
}

方案2：CSS Grid共享区域实现宽度联动 #

将可见部分和下拉菜单放入同一网格单元格，容器会自动取两者的最大宽度作为自身宽度：

.select-container {
  display: inline-grid;
  position: relative;
}

.select-visible, .select-dropdown {
  grid-area: 1 / 1; /* 共享同一网格位置 */
}

.select-visible {
  padding: 4px 8px;
  border: 1px solid #ddd;
  background: #fff;
  z-index: 1; /* 确保可见部分在上层 */
}

.select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #ddd;
  background: #fff;
  visibility: hidden; /* 默认隐藏 */
}

.select-container.open .select-dropdown {
  visibility: visible; /* 展开显示 */
}

方案3：兼容旧浏览器的占位元素法 #

如果需要支持较老浏览器，可以添加一个隐藏的占位元素，复制下拉菜单的内容，让容器参考这个占位元素的宽度：

.select-container {
  position: relative;
  display: inline-block;
}

.select-visible {
  padding: 4px 8px;
  border: 1px solid #ddd;
  background: #fff;
}

.select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #ddd;
  background: #fff;
  display: none;
}

.select-placeholder {
  visibility: hidden;
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 8px;
}

.select-container.open .select-dropdown {
  display: block;
}

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