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

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


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

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

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

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

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

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

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

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

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

calc 计算?

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

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

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