V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
yazoox
V2EX  ›  CSS

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

  •  
  •   yazoox · 83 天前 · 652 次点击
    这是一个创建于 83 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我们的组件是用 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 条附言  ·  76 天前
    这个是我最终期望的

    图二
    ![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)
    14 条回复    2021-09-17 19:01:39 +08:00
    cxe2v
        1
    cxe2v  
       83 天前
    自动缩回去是什么效果,这里没想明白
    Biwood
        2
    Biwood  
       83 天前
    试了,没遇到你说的问题,demo 在这儿 https://codepen.io/oodzchen/pen/vYZxVmx

    是不是哪里语法写错了
    cyrbuzz
        3
    cyrbuzz  
       83 天前
    好像没看懂具体意图,如果绿框内容不能省略,滚动或者红框变高,如果绿框内容可以省略,直接省略就好了啊。

    你的期望难道是绿框内容自动缩到红框剩余高度且内容不变吗= =...
    liyang5945
        4
    liyang5945  
       83 天前
    这个我遇到过,需要触发 BFC,方法之一:在绿的元素上设置 overflow:auto
    IsaacYoung
        5
    IsaacYoung  
       83 天前
    上个 demo
    seki
        6
    seki  
       83 天前
    详情内容就是会有这么多,所以占用了这么多空间。你想让它缩回去,就是要 overflow scroll 了吧
    xianyu191031
        7
    xianyu191031  
       83 天前
    给蓝框上一个 flex-shrink: 0, 绿框 height: 100% 看看是不是符合你的预期
    yazoox
        8
    yazoox  
    OP
       83 天前
    @seki
    @liyang5945

    设置了 overflow,而且竖状的 scrollbar 也出现了,能够正常工作,工作也是正确的。
    但是,绿框,还是超出来很多!
    Junh
        9
    Junh  
       83 天前
    auroraccc
        10
    auroraccc  
       83 天前
    加个 min-width: 0, flex-shrink 在计算的时候会考虑 min-content, 而 min-content 又会受诸如 whiteSpace: nowrap 之类的影响
    DrakeXiang
        11
    DrakeXiang  
       83 天前
    flex 就是这种问题有点蛋疼,什么设个最小宽度加个 margin 啥的
    Charrlles
        12
    Charrlles  
       82 天前 via iPhone
    10 楼是正解
    yazoox
        13
    yazoox  
    OP
       76 天前
    @auroraccc
    @Junh

    按照说明,我尝试了下,就变成了图三( Append 里面的图片链接)的样子。因为有 min-width,而最初的数据是空,所以,绿色框就直接缩到最小了,然后,绿色和红色之间,有一大块“留白”。
    auroraccc
        14
    auroraccc  
       76 天前
    @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>

    这个结构你看看
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2891 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 11:01 · PVG 19:01 · LAX 03:01 · JFK 06:01
    ♥ Do have faith in what you're doing.