在使用Flex布局时，overflow-scroll失效的情况时有发生。本文将分析此问题，并提供有效的解决方案。
问题：一个垂直Flex容器（flex-direction: column），包含一个设置了flex-grow属性的子元素。期望该子元素内容溢出时出现滚动条，但设置overflow-scroll后无效。
原因：overflow属性只有在元素内容实际超出其容器尺寸时才生效。如果Flex子元素没有明确定义高度（height）或最大高度（max-height），即使内容溢出，overflow-scroll也无法触发滚动条。即使设置了height: 100%，如果父级Flex容器或更高层元素未设置高度，100%也无法生效，导致overflow-scroll失效。
解决方案：为需要滚动条的Flex子元素设置明确的高度，例如像素值、百分比或视口单位vh。如果父级元素高度未定义，建议使用vh单位，使子元素高度根据视口高度自适应，从而正确触发滚动条。例如，将height设置为100vh或其他合适的vh值，或为父级元素设置明确的高度。只有当子元素内容实际超出其自身定义的高度时，overflow-scroll才能正常工作。
