我已经在宽度固定的flex-row父元素中使用了span和div
1
982.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则占据父元素剩余的整个宽度。现在（如您在代码片段中所见），当文本移到新行时，红色背景区域的宽度比文本宽。如何修复这段代码？我需要红色背景正好结束在文本的边缘
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
也许你可以将
parent设置为网格并使用fr单位进行测量？这将使文本容器的宽度与文本的确切宽度相同，并使剩余的容器占据剩余空间的1份（没有其他容器会占据100%的空间）。
对于行显示，只需将columns更改为rows。