如何仅用CSS实现左侧元素过长时自动下移右侧对齐元素？

需求说明 #

需要实现如下自适应布局：

• 当标题（粉色元素）内容较短时，按钮区域（棕色元素）与标题+内容区域并排显示（场景A）
• 当标题内容过长时，标题自动占满整行，按钮区域下移至内容区域右侧（场景B）
• 标题尺寸随文本内容动态调整

纯CSS解决方案 #

无需JavaScript或两套模板，通过Flex布局即可实现：

统一HTML结构

<div class="parent">
  <div class="title">A short title</div>
  <div class="content-button-group">
    <div class="content-group">
      <div class="three">Some text here</div>
      <div class="three">some more text</div>
    </div>
    <div class="button-wrap">
      <button>A button</button>
    </div>
  </div>
</div>

<div class="parent">
  <div class="title">Testing a very long title that pushes the button area downward</div>
  <div class="content-button-group">
    <div class="content-group">
      <div class="three">Some text here</div>
      <div class="three">some more text</div>
    </div>
    <div class="button-wrap">
      <button>A button</button>
    </div>
  </div>
</div>

CSS代码

.parent {
  width: 170px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  outline: 2px solid rgba(255, 0, 0, 0.3);
  margin: 1.5em 0;
}

.title {
  background: pink;
  width: max-content; /* 宽度由内容决定 */
  max-width: 100%; /* 最大宽度不超过父容器，防止溢出 */
  flex: 1 0 auto; /* 允许标题在空间不足时占满整行 */
  margin: 0 0 0.5em 0;
}

.content-button-group {
  display: flex;
  flex: 1 0 auto;
  align-items: flex-start;
  width: 100%; /* 标题换行后，内容+按钮组占满整行 */
}

.content-button-group:not(:only-child) {
  width: auto; /* 标题未换行时，内容+按钮组宽度自适应 */
}

.content-group {
  flex: 1;
  outline: 2px solid rgba(0, 255, 0, 0.3);
}

.button-wrap {
  outline: 2px solid rgba(165, 42, 42, 0.3);
  margin-left: 0.5em;
}

* {
  box-sizing: border-box;
}

原理说明

1. 父容器使用flex-wrap: wrap，允许子元素在空间不足时自动换行
2. 标题通过width: max-content保证宽度由文本内容决定，max-width: 100%避免溢出父容器
3. content-button-group在标题未换行时宽度自适应，与标题并排；当标题占满整行时，通过width: 100%占满父容器，内部的Flex布局让内容区域和按钮保持并排
4. 利用flex: 1 0 auto控制元素的伸缩性，实现动态布局切换

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