如何基于特定容器动态调整Popup宽度？

这需求挺精准的，核心就是要让Popup的宽度只“听”按钮容器的话——按钮文本太长时才允许放宽，文本容器的内容再长都得守住370px的底线。我给你整一套纯CSS的实现方案，完全不用JS：

实现思路 #

1. 让Popup默认宽度锁定370px，但允许被按钮容器的内容撑开
2. 强制按钮容器里的按钮始终单行显示，这样长文本会直接拉伸容器
3. 文本容器的宽度完全继承Popup的当前宽度，但绝不允许它反过来影响Popup的宽度

完整代码示例 #

HTML结构

<div class="popup">
  <div class="text-container">
    这里是超级长超级长超级长超级长超级长超级长超级长超级长超级长超级长超级长超级长的文本内容，但Popup宽度依然稳在370px
  </div>
  <div class="buttons-container">
    <button>普通按钮</button>
    <button>这个按钮的文本超长超长超长超长超长超长超长超长</button>
  </div>
</div>

CSS样式

.popup {
  /* 用inline-flex实现垂直布局，同时让宽度由内容决定 */
  display: inline-flex;
  flex-direction: column;
  /* 锁定最小宽度为370px，这是默认宽度 */
  min-width: 370px;
  /* 加些基础样式让Popup看起来更像那么回事 */
  border: 1px solid #e0e0e0;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.text-container {
  /* 宽度完全继承Popup，内容过长时自动换行（也可以用滚动） */
  width: 100%;
  margin-bottom: 16px;
  overflow-wrap: break-word;
  /* 如果想要横向滚动，换成 overflow-x: auto; 即可 */
}

.buttons-container {
  /* 强制按钮区域不换行，确保长文本能撑开Popup */
  white-space: nowrap;
}

.buttons-container button {
  margin-right: 8px;
  padding: 8px 16px;
  border: 1px solid #2196f3;
  border-radius: 4px;
  background: #fff;
  color: #2196f3;
  cursor: pointer;
}

效果验证 #

• 当按钮文本都较短时，Popup宽度稳定在370px，文本容器的长内容会在370px内自动换行
• 当按钮文本总长度超过370px时，Popup会自动拉伸到合适宽度（比如你说的383px），此时文本容器也会跟着变宽，但依然不会因为自身内容再拉伸Popup

这个方案兼容性拉满，现代浏览器都能跑，而且完全不需要JS介入，维护起来超省心～

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