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

[yazoox]

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

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

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

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

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

这个是我最终期望的

图二


这个是设置了 min-height 的
图三

[cxe2v]

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

[Biwood]

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

是不是哪里语法写错了

[cyrbuzz]

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

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

[liyang5945]

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

[IsaacYoung]

上个 demo

[seki]

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

[xianyu191031]

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

[yazoox]

@seki
@liyang5945

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

[Junh]

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

[auroraccc]

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

[DrakeXiang]

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

[Charrlles]

10 楼是正解

[yazoox]

@auroraccc
@Junh

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

[auroraccc]

@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>

这个结构你看看