我尝试将两个元素水平对齐,左边的元素包含可以换行的文本,然后调整屏幕大小,右边的元素不允许换行。当内容换行时,第一个元素保持内容的宽度+(换行的单词-导致换行的像素),而不是缩小以适应内容。
我在Fiddle上创建了一个示例,您可以看到第一个元素的灰色背景中有几个像素没有内容,而不是调整大小以仅包含文本。
.container {
display: flex;
width: 760px;
}
.item {
background-color: grey;
width: fit-content;
block-size: fit-content;
}
.item2 {
background-color: green;
white-space: nowrap;
align-self: flex-start;
}
<div class="container">
<div class="item"><span> This Text to auto-adjust to only fit the content when wrapping</span></div>
<div class="item2">This should be right next to last word on first line on the left</div>
</div>
JSFiddle Demo
有没有一种方法可以在调整屏幕大小时实现自动调整大小,使2个元素尽可能接近第一个元素的文本?
1条答案
按热度按时间o2rvlv0m1#
Flexbox中的元素默认设置了
flex-grow
和flex-shrink
,这允许它们绕过基本的width
和height
属性。要解决此问题,只需禁用
flex-grow
和flex-shrink
: