gpt4 book ai didi

html - 如何使用 flexbox 使 block 占据剩余宽度

转载 作者:太空宇宙 更新时间:2023-11-04 12:03:01 25 4
gpt4 key购买 nike

所以我的布局接近这个:

.wrapper
.flex
.flex-item.first
.flex-item.last
%p

和 css 接近这个:

.wrapper {
min-width: 1100px
max-width: 1300px
}

.flex {
display: flex
}

.flex-item.first {
flex: 0 0 250px;
}

.flex-item.last {
flex-grow: 5
}

p {
word-wrap: break-word;
}

我想要实现的是让最后一个 flex 元素占据剩余的宽度并且它工作正常,几乎......

如果我在 paragraph 标签 中放置一个长字符串,我希望它占用父级的宽度,如果该行太长,则将文本转移到下一行并且它可以正常工作就像在 Chrome 中那样,但在 Firefox 中,这个长字符串使第二个 flex-item 超出允许的宽度,使其超过 1300px 从而破坏了布局...

附言

1)我尝试将第一个元素向左浮动并向最后一个元素添加溢出并且它工作正常(并非没有并发症)但是我猜 flexbox 似乎更容易使用......

2) flex-grow 的数字 5 是随机的,只是让它足够大以使其占用剩余空间

Fiddle 链接:https://jsfiddle.net/afj88pc5/

最佳答案

使用以下 css 将有效:

p {
word-wrap: break-word;
word-break: break-all;
}

检查更新的 Fiddle在这里。

关于html - 如何使用 flexbox 使 block 占据剩余宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29600378/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com