css 内部文本换行时容器不收缩

ix0qys7i  于 2023-02-17  发布在  其他
关注(0)|答案(1)|浏览(164)

我尝试将两个元素水平对齐,左边的元素包含可以换行的文本,然后调整屏幕大小,右边的元素不允许换行。当内容换行时,第一个元素保持内容的宽度+(换行的单词-导致换行的像素),而不是缩小以适应内容。
我在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个元素尽可能接近第一个元素的文本?

o2rvlv0m

o2rvlv0m1#

Flexbox中的元素默认设置了flex-growflex-shrink,这允许它们绕过基本的widthheight属性。
要解决此问题,只需禁用flex-growflex-shrink

.item {
    background-color: grey;
    width: fit-content;
    block-size: fit-content;
    flex-grow: 0;
    flex-shrink: 0;
}

相关问题