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

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

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

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