为什么 给angular 中的自定义组件 设置样式flex:1 其高度就会超出

‌在Angular中给自定义组件设置样式flex:1导致其高度超出父元素的原因是由于Flex布局的默认行为。‌ 当父元素使用flex布局且设置了flex: 1，子元素会尝试填充父元素的剩余空间。如果子元素的高度不固定，它可能会超出父元素的高度，导致滚动条无法正确显示。

‌Flex布局的默认行为是导致高度超出问题的主要原因。‌ Flex布局默认min-height/min-width: auto，这意味着子元素会保持其自身的高度，而不是适应父元素的高度。这导致子元素的高度可能会超过父元素，从而产生高度超出的问题‌1。

‌解决方案包括调整CSS属性以避免高度超出。‌ 可以通过设置min-height: 0和height: 0来解决问题，这样可以确保子元素不会因为默认的min-height行为而撑大父元素‌12。此外，将align-items设置为flex-start也可以帮助保持子项的原始高度‌3。