如何根据内容的宽度制作跨度（flexbox）

Question

我已经固定了宽度弹性行父级，其中包含 span 和 div

.parent {
  display: flex;
  flex-direction: row;
  width: 230px;
  background-color: blue;
}

.child1 {
  background-color: red;
}

.child2 {
  min-width: 40px;
}

<div class="parent">
    <span class="child1">There is some text inside span</span>
    <div class="child2"/>
</div>

我想要的是 span 始终是文本的宽度，而 div 占据父级的整个剩余宽度。现在（正如您在代码片段中看到的），当文本移动到新行时，红色背景区域会比文本更宽。如何修复此代码？我需要红色背景恰好在文本边缘结束

Answer 1

为什么不制作

parent

网格并使用 fr 测量？

grid-template-columns: fit-content, 1fr

这将允许文本容器为文本的精确宽度，而剩余容器为剩余空间的 1 分之一（没有其他容器可以使其达到 100%）。

对于行显示，只需将列更改为行。