如何在保持HTML结构不变的前提下用CSS实现div内段落式布局？

当前实现的布局效果：

希望达成的段落式显示效果：

能否在保持现有HTML结构的前提下实现该效果？我尝试过flex、grid布局均未成功，将label嵌套进content-wrapper的方案可行，但我希望尽量不采用该方案。

示例代码 #

CSS #

.container {
  display: flex;
  /* Makes the container an inline block element */
  vertical-align: top;
  /* Aligns the top edge of the container with the top edge of the previous element */
  width: 600px;
}

label {
  background-color: #8ff;
  display: inline-block;
  /* Makes the label element an inline block element */
}

.content-wrapper {
  background-color: #f8f;
  display: flex;
  /* Makes the content-wrapper an inline block element */
  flex-wrap: wrap;
  white-space: nowrap;
  /* Prevents the content from wrapping to the next line */
  overflow-x: auto;
  /* Allows horizontal scrolling if the content overflows */
}

span {
  display: inline-block;
  /* Makes the child elements inline block elements */
  margin-right: 10px;
  /* Add some spacing between the child elements */
}

HTML #

<div class="container">
  <label>Label</label>
  <div class="content-wrapper">
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
    <span>Content</span>
  </div>
</div>

解决方案（保持原HTML结构） #

通过调整CSS布局即可实现目标效果，核心是让标签靠左浮动，内容区域自动填充剩余空间并支持换行：

.container {
  width: 600px;
  /* 移除flex布局，恢复块级元素默认行为 */
}

label {
  background-color: #8ff;
  float: left;
  margin-right: 10px; /* 与内容保持间距 */
}

.content-wrapper {
  background-color: #f8f;
  display: flex;
  flex-wrap: wrap; /* 允许内部元素换行 */
  overflow: hidden; /* 触发BFC，避免内容环绕浮动的label */
  /* 移除white-space: nowrap和overflow-x: auto，取消横向滚动 */
}

span {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 5px; /* 可选，增加换行后的垂直间距 */
}

原理说明 #

• 给label设置float: left，使其脱离文档流并靠左排列
• content-wrapper通过overflow: hidden触发BFC，自动占据容器剩余宽度，同时避免内部内容环绕浮动的标签
• 保留flex-wrap: wrap让内部span元素在空间不足时自动换行，形成段落式排版

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