使用flexbox来根据内容的宽度创建span的方法

Question

我已经在宽度固定的flex-row父元素中使用了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">这是span中的一些文本</span>
    <div class="child2"/>
</div>

我希望span始终与文本的宽度相同，而div则占据父元素剩余的整个宽度。现在（如您在代码片段中所见），当文本移到新行时，红色背景区域的宽度比文本宽。如何修复这段代码？我需要红色背景正好结束在文本的边缘

Answer 1

也许你可以将parent设置为网格并使用fr单位进行测量？

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

这将使文本容器的宽度与文本的确切宽度相同，并使剩余的容器占据剩余空间的1份（没有其他容器会占据100%的空间）。

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