除了 Flex，还有什么办法好办法解决"最后一个盒子塞满剩余空间"这个问题

[abcbuzhiming]

在很多同样是以标记语言画 UI 的系统里，如 WPF ，avalonia ，flutter 它们是直接提供了一个容器，只要你把组件丢进这个容器，那么最后一个组件必然会占领父元素的所有剩余空间。


但是在 web 系统，这个问题有点复杂，web 系统里，绝大部分别人开发的组件，最后变成 html 代码的时候，它并不是一个整体，而是套了好多层 div 的一个散装结构。你真正希望达到你想要的效果，往往得把这个组件靠近内层的某个 div ，给它撑大，才能让组件的视觉效果上达到了占据所有剩余空间的目标。

而使用 flex 的弱点就在于，你如果想要它达到目标，那么到达这个“最终 div”的路径上的所有父元素，都必须是 flex 。然而很遗憾的是，各家组件开发者的想法不同，而且他们显然不会在组件的实现上完全采用 flex 布局。这就导致你想用 flex 布局达到目标的想法难以实现，就算你真的用笨办法，挨个去用 CSS 把这个组件生成的 html ，给它按个查下去，路径上的所有 div 都给改了 flex ，也未必会达到效果——有些作者会在组件的实现上用 float 或者绝对布局，让你吃瘪。。。

这个问题非常的困扰我，似乎暂时没有更好的办法，究其原因就在于其它 UI 平台上一个组件，真的被视为一个整体。而在 web 平台上，绝大部分组件都会变成散装的 html

[Felldeadbird]

我盲猜是 UI 组件 没有预留 定义的 class ，然后改起来很吃力。

定义了 display:flex 后，父类设定总宽度或者高度，特定子类设定宽度或者高度，剩余的会自动根据布局放置元素直到达到父类设定的宽度高度上限。

[tool2dx]

“有些作者会在组件的实现上用 float 或者绝对布局，让你吃瘪”

别想太多了，现在谁还用 float 布局哦。绝对布局的话，预设一个最小高度就可以了。

一般 flex 不会不生效，除非无法推断出内部 div 的真实高度。我有时候还觉得 flex 太灵活，以至于写完布局要跨平台挺难的，只能在前端用。

[cyrbuzz]

最后一个元素 flex-grow:1 就可以撑满吧。

[tomSoSleepy]

calc 计算?

[abcbuzhiming]

@Felldeadbird 即使有预留 class ，改起来也挺吃力，因为往往套三四层，你得挨个搞下去


@tool2dx 哥们，我说的是组件本身，我是真的见到了，组件编译成 html 后，其中某一个，或者某几个 div ，居然是 float ，我也不知道组件的作者要这么设计。而且你们肯定前端很熟练，自然觉得好改，我这边后端出身的，对 css 没有那么了解，见到这种完全没办法。


@cyrbuzz 只要到达最后元素的路径上有任意一个 div 不是 flex ，你最后一个元素设置 flex-grow:1 不会有任何效果，我也不清楚，到底是不是因为中间路径上的某个 div 是被加持了什么怪异的属性。导致最后的 div 设置 flex-grow:1 无效

[chnwillliu]

要看你是横向还是竖向，div 是 block level 默认占父容器的全宽度，完全不用一路 flex 下去。竖向就比较麻烦，除非组件特意做了会占满父容器的 100% height 的 css 定义，否则你确实要一层层 hack 样式。

[crz]

组件再怎么考虑完善也是有预设场景的，不能满足需求的话可以尝试覆盖样式（不只是少量几个属性，可能需要多个元素多个样式），要么换一个或者自己写

用组件更麻烦的是 dom 结构不合适，再怎么改样式 dom 结构也不会变

[chnwillliu]

本质原因是 CSS 布局中高度是由元素堆叠起来的，父容器依赖子元素的高度来得到自己的高度，而 height 100% 或者 min-height 100%不会传递。宽度或者说 inline 方向上就没这个问题。

[abcbuzhiming]

@chnwillliu 对啊，我现在就是竖向问题解决不了

[chnwillliu]

@abcbuzhiming #9

除非组件作者说了，本组件支持设定 height 100% 自动 take 父容器 define 的高度，否则就是不支持。默认都是组件内容渲染得到多高就占多高。