请教一下， flexbox，子元素超出父元素空间的问题。

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 1204 天前的主题，其中的信息可能已经有所发展或是发生改变。

我们的组件是用 react 写的，css 是用 styled-component 写的。比较复杂，没有办法直接贴代码出来。

我画了一张图。红，蓝，绿都是 flexbox，flex-direction: column, flex: 0 1 auto，基本都是默认的设置

设计的初衷，是希望蓝框和绿框都能够在红框内部。

红：固定 width & height，比如，300px 600px 蓝：高和宽，没有设置，应该默认就是 auto 。里面有列表，点击一个 item，会在绿框里面显示其详细的属性，属性的条目有多有少（问题就在这里）绿：高和宽，没有设置，应该默认就是 auto 。也有列表。当显示蓝框里 item 的详细属性时，如果条目少，则绿框没有问题。但如果条目很多，绿框直接就超过红框。突出去很多。明明 flex-shrink 是 1，应该会自动缩回去啊，咋不缩回去呢？

这个，可能是啥原因？整了一两天，完全找不到头绪。希望能兄弟姐妹们，能给一点提示。

css flexbox

第 1 条附言 · 2021-09-17 15:28:58 +08:00

这个是我最终期望的

图二
![Screen Shot 2021-09-17 at 3.25.41 PM.png]( https://i.loli.net/2021/09/17/wiIBSryxfTV3CHX.png)

这个是设置了 min-height 的
图三
![Screen Shot 2021-09-17 at 3.26.29 PM.png]( https://i.loli.net/2021/09/17/HEeLMc1muIpwaAU.png)

flexbox

auto

蓝框

绿框

14 条回复 • 2021-09-17 19:01:39 +08:00

cxe2v

2021-09-10 10:00:31 +08:00

自动缩回去是什么效果，这里没想明白

Biwood

2021-09-10 10:15:35 +08:00

试了，没遇到你说的问题，demo 在这儿 https://codepen.io/oodzchen/pen/vYZxVmx

是不是哪里语法写错了

cyrbuzz

2021-09-10 10:28:20 +08:00

好像没看懂具体意图，如果绿框内容不能省略，滚动或者红框变高，如果绿框内容可以省略，直接省略就好了啊。

你的期望难道是绿框内容自动缩到红框剩余高度且内容不变吗= =...

liyang5945

2021-09-10 10:38:32 +08:00

这个我遇到过，需要触发 BFC，方法之一：在绿的元素上设置 overflow:auto

IsaacYoung

2021-09-10 10:40:36 +08:00

上个 demo

seki

2021-09-10 10:45:12 +08:00

详情内容就是会有这么多，所以占用了这么多空间。你想让它缩回去，就是要 overflow scroll 了吧

xianyu191031

2021-09-10 10:51:22 +08:00

给蓝框上一个 flex-shrink: 0，绿框 height: 100% 看看是不是符合你的预期

yazoox

2021-09-10 11:11:48 +08:00

@seki
@liyang5945

设置了 overflow，而且竖状的 scrollbar 也出现了，能够正常工作，工作也是正确的。
但是，绿框，还是超出来很多!

Junh

2021-09-10 11:15:40 +08:00

@liyang5945 其实和 BFC 没什么关系
https://juejin.cn/post/6974356682574921765

auroraccc

2021-09-10 11:34:29 +08:00

加个 min-width: 0, flex-shrink 在计算的时候会考虑 min-content, 而 min-content 又会受诸如 whiteSpace: nowrap 之类的影响

DrakeXiang

2021-09-10 17:33:52 +08:00

flex 就是这种问题有点蛋疼，什么设个最小宽度加个 margin 啥的

Charrlles

2021-09-10 19:16:49 +08:00 via iPhone

10 楼是正解

yazoox

2021-09-17 15:32:33 +08:00

@auroraccc
@Junh

按照说明，我尝试了下，就变成了图三（ Append 里面的图片链接）的样子。因为有 min-width，而最初的数据是空，所以，绿色框就直接缩到最小了，然后，绿色和红色之间，有一大块“留白”。

auroraccc

2021-09-17 19:01:39 +08:00

@yazoox

<div
style={{
width: "300px",
height: "600px",
border: "3px solid red",
display: "flex",
flexDirection: "column"
}}
>
<div
style={{
border: "3px solid blue",
wordBreak: 'break-all'
}}
>
auto height
</div>
<div
style={{
border: "3px solid green",
wordBreak: 'break-all',
flex: 1,
overflow: 'auto',
}}
>
overflow auto
</div>
</div>

这个结构你看看