html - 文本换行时元素占据 100% 的宽度(flexbox)

Question

我正在做一个元素，但在理解这种 CSS 行为的工作原理时遇到了一些问题。

看看这支笔，我在其中重新创建了一个非常基本的场景: https://codepen.io/BroderBen/pen/MXrMyy

//Markup
<h2>This is how it looks now:</h2>
<div class="parent">
  <h3> Hello Hello </h3>
  <h3>
    Helloooooooooo Helloooooooooo 
  </h3>
</div>

<h2>width: min-content makes text break prematurely (first segment with hello hello):</h2>
<div class="parent">
  <h3 class="min-content"> Hello Hello </h3>
  <h3 class="min-content">
    Helloooooooooo Helloooooooooo 
  </h3>
</div>

<br/>
<h2>This is how I want it to look, but automaticly (not with br tags):</h2>

<div class="parent">
  <h3> Hello Hello </h3>
  <h3>
    Helloooooooooo <br/> Helloooooooooo 
  </h3>
</div>

//CSS
.parent{
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid black;
  width: 200px;
}
h3{
  border-bottom: 2px solid black;
  text-align: center;
}
//added min-content class to showcase problems
.min-content{
  width: min-content;
}

我有一些带有 border-bottom 的文本，宽度是相对于里面的文本的，所以边框只“覆盖”了文本下面的区域。

当文本太多时会出现问题，因此它换行到第二行，然后子项占据父项的 100%，即使旁边有很多白色。

父级需要是一个 flex 容器，所以我认为表格/表格单元格技巧不会奏效。

我试过 min-content，但它在文本到达父级的宽度之前将其换行，而 max-content 似乎根本不会破坏它。

提前致谢!

Answer 1

我通过使用表格单元格“hack”解决了这个问题。笔随解决方案更新。

我找到了这个例子并遵循它:http://jsfiddle.net/audetwebdesign/h34pL/

:after {
    content: "";
    display: table-cell;
    width: 100%;
}

编辑:在我的例子中，我不得不使用 :after 和 :before。将每一侧的 % 调整为 15%，这适用于可能占用此空间的不同文本。

虽然这不是一个“全方位”的解决方案，但适用于我的具体情况。