Flexbox无法填满内容区域？求实现自适应文本+剩余空间虚线布局

我不确定Flexbox是不是正确的方案，但我需要实现一个两列布局：

• 第一列放置任意文本，宽度自适应文本内容；
• 第二列为虚线分隔线，占据右侧剩余空间；
• 两列之间保留16px间距。

请问当前做法是否正确？哪里出错了？期望效果是标题文本左侧自适应宽度，右侧虚线填满剩余空间。

现有代码：

CSS代码 #

body {
  font-family: Montserrat;
  background-color: #f0f0f0;
  color: #34363e;
}

.main {
  height:100%;
  width: 100%;
  padding: 64px 0;
}

.container {
  height:100%;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.h2-container {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 0 32px 16px;
  margin: 0;
  width: 1136px;
  gap: 16px;
}

.h2-box {
  width: 100%;
}

h2 {
  text-align: left;
  font-size: 27px;
  margin: 0;
}

.hr-box {
  width: 100%;
}

hr {
  border: none;
  border-top: 4px dotted #cccccc;
  width: 100%;
  height: fit-content;
}

p {
  text-align: left;
  font-size: 16px;
  line-height: 24px;
  padding: 0 32px;
  margin: 16px 0;
}

HTML代码 #

<div class="main">
  <div class="container">
    <div class="h2-container">
      <div class="h2-box"><h2 class="">This is a title sentance</h2></div>
      <div class="hr-box"><hr></div>
    </div>
    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo leo, interdum quis auctor at, congue a justo. Donec accumsan nulla id fringilla vulputate. Ut sed mauris pellentesque, venenatis dui quis, consectetur nisl.</p>
  </div>
</div>

Flexbox完全适合实现这个需求，你的现有代码存在以下问题：

1. .h2-container设置固定宽度1136px且使用inline-flex，限制了布局响应性，无法自适应父元素宽度；
2. .h2-box设置width:100%，导致标题容器强制占满空间，无法自适应文本宽度；
3. .hr-box仅设置width:100%，未利用Flexbox的flex-grow属性占据剩余空间。

修正后的代码如下：

修正后的CSS #

body {
  font-family: Montserrat;
  background-color: #f0f0f0;
  color: #34363e;
}

.main {
  height:100%;
  width: 100%;
  padding: 64px 0;
}

.container {
  height:100%;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.h2-container {
  display: flex; /* 替换inline-flex为flex，让容器占满父元素宽度 */
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 0 32px 16px;
  margin: 0;
  gap: 16px;
  align-items: center; /* 让标题和虚线垂直居中对齐 */
}

.h2-box {
  flex-shrink: 0; /* 防止标题容器被压缩，宽度自适应文本 */
}

h2 {
  text-align: left;
  font-size: 27px;
  margin: 0;
}

.hr-box {
  flex-grow: 1; /* 让虚线容器占据剩余空间 */
}

hr {
  border: none;
  border-top: 4px dotted #cccccc;
  width: 100%;
  margin: 0; /* 移除默认margin避免间距问题 */
}

p {
  text-align: left;
  font-size: 16px;
  line-height: 24px;
  padding: 0 32px;
  margin: 16px 0;
}

修正后的HTML（无需修改） #

<div class="main">
  <div class="container">
    <div class="h2-container">
      <div class="h2-box"><h2>This is a title sentance</h2></div>
      <div class="hr-box"><hr></div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo leo, interdum quis auctor at, congue a justo. Donec accumsan nulla id fringilla vulputate. Ut sed mauris pellentesque, venenatis dui quis, consectetur nisl.</p>
  </div>
</div>

关键修改说明：

• 把.h2-container的inline-flex改为flex并移除固定宽度，让容器自适应父容器；
• 给.h2-box加flex-shrink:0，确保标题宽度随文本内容变化；
• 给.hr-box加flex-grow:1，让它自动填充剩余空间；
• 添加align-items:center让标题和虚线垂直居中，视觉更协调；
• 移除hr的默认margin，消除不必要的间距。

内容的提问来源于Stack Exchange，提问作者user1995062