如何基于子div动态设置主div宽度？CSS实现方案咨询

问题场景 #

给定以下HTML结构：

<div id='main'>
  <div id='1'>
      Text I want to have overflow: hidden 
  </div>
  <div id='2'>
      Text that I want to decide the width of main div 
  </div>
</div>

实际需求对应场景：主容器宽度由底部按钮区（对应#2）决定，按钮区内容溢出时主容器宽度随之扩展；列表内容区（对应#1）超出指定最大宽度时，主容器宽度保持限制，同时列表内容自动截断。

纯CSS实现方案 #

完全可以通过纯CSS实现，核心利用inline-block的包裹特性结合max-width限制，代码如下：

#main {
  display: inline-block;
  max-width: 500px; /* 自定义的最大宽度值 */
}

#1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

#2 {
  /* 保持默认块级行为，内容过长时自动撑开容器宽度 */
}

原理说明 #

1. #main设置display: inline-block：让容器宽度自动适配内部元素的最小需求宽度，即由#2的内容宽度主导
2. max-width限制：当#2内容过长导致容器宽度触达设定的max-width时，容器宽度被固定，不再继续扩展
3. #1的截断逻辑：width: 100%使其继承容器当前宽度，配合overflow: hidden、text-overflow: ellipsis和white-space: nowrap实现单行内容超出时的省略号截断
4. #2的默认特性：作为块级元素，内容过长时会自动撑开容器（若需强制不换行可添加white-space: nowrap），直到容器触达max-width限制

多行内容截断适配（可选） #

如果#1需要支持多行内容截断，可替换为以下CSS（注意部分浏览器兼容性）：

#1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 设置显示行数 */
  width: 100%;
}

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