如何让inline-block容器下的绝对定位内容保持block级宽度？

问题核心是：当.wrapper设为inline-block时，它的宽度由内部的button决定，而绝对定位的.content默认会以.wrapper的宽度为参考，导致内容被挤压换行。要让.content的宽度像.wrapper是block时那样自适应内容，有以下几种可行方案：

方案1：用width: max-content直接让宽度匹配内容 #

这是最直观的解决方式，强制.content的宽度由内部内容决定，不受父容器宽度限制：

.wrapper {
  position: relative;
  display: inline-block;
}

button {
  color: white;
  border: 0;
  background: #2c7be5;
  padding: 10px 15px;
}

.content {
  position: absolute;
  border: 1px solid #2c7be5;
  margin-top: 4px;
  padding: 15px;
  width: max-content; /* 关键属性 */
}

现代浏览器（Chrome、Firefox、Edge、Safari 14.1+）都支持这个属性，适合不需要兼容旧浏览器的场景。

方案2：保证下拉框不窄于按钮，同时自适应内容 #

如果需要下拉框至少和按钮一样宽，同时能容纳更长的内容，可以结合min-width: 100%和width: auto：

.content {
  position: absolute;
  border: 1px solid #2c7be5;
  margin-top: 4px;
  padding: 15px;
  left: 0;
  min-width: 100%; /* 确保宽度不小于按钮 */
  width: auto; /* 让宽度随内容扩展 */
}

这个方案兼容性更好，能覆盖大部分浏览器。

方案3：用Grid布局重构容器 #

把.wrapper改成inline-grid，让按钮和下拉内容不在同一个排版上下文，下拉内容可以自然突破父容器的宽度限制：

.wrapper {
  position: relative;
  display: inline-grid; /* 替换inline-block */
}

.content {
  position: absolute;
  border: 1px solid #2c7be5;
  margin-top: 4px;
  padding: 15px;
  top: 100%; /* 定位到按钮正下方 */
  left: 0;
}

这种方式不需要额外设置宽度属性，布局逻辑更清晰。

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