本文探讨了在开发中如何利用Flex布局让容器自动填充剩余高度，并解决内容溢出导致的滚动条问题。通过设置height/min-height为0及overflow:hidden，可以有效地控制元素的尺寸和隐藏溢出内容。同时，解释了width/height、min-width/height与overflow属性在Flex布局中的作用。
先讲解决方案：
1、（自动占满容器）设置height/min-height：0
2、设置overflow：hidden
原理是flex内容溢出原理
1、开发中想利用flex：1实现容器自动占满剩余高度；效果如下图:
2、实现的时候div3是一个容器装一个有滚动条的列表, 所以导致实际div2（也是一个带滚动条）的高度被侵占（缩小）
若div2是固定高度不带滚动，父容器应该会被撑高
3、width/height属性只是一个当flex-basis没有被设置时的回退选项，min-width/height和max-width/height则是flex-basis的下限和上限
因此需要设置容器的min/max-width/height都可以 或者 设置overflow：hidden限制溢出
您可能感兴趣的与本文相关的镜像
AutoGPT
AutoGPT于2023年3月30日由游戏公司Significant Gravitas Ltd.的创始人Toran Bruce Richards发布,AutoGPT是一个AI agent（智能体），也是开源的应用程序，结合了GPT-4和GPT-3.5技术，给定自然语言的目标，它将尝试通过将其分解成子任务，并在自动循环中使用互联网和其他工具来实现这一目标
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
扫一扫
5132
