移动端 Flex 布局中元素溢出容器如何排查
当 flex 容器高度固定且子元素高度大于容器时，检查 align-self 属性是否设置为 stretch。
检查 align-self 是否为 stretch
在移动端开发中，如果 flex 容器设置了固定高度，而子元素高度默认为 auto，浏览器可能会尝试拉伸子元素以填满容器。根据 CSS 规范，当 align-self 的值为 stretch 时，如果子元素的高度为 auto，其高度会被设置为填满容器的长度。如果子元素本身有固定高度，stretch 值会失效并回退到 flex-start。因此，排查的第一步是确认子元素的 align-self 属性是否被显式设置为 stretch，或者父容器的 align-items 是否为 stretch。如果父容器未设置，子元素默认继承父容器的 align-items 值，这可能导致子元素被拉伸至超出容器高度。
可以通过开发者工具检查元素的计算样式，查看 align-self 的具体值。如果发现 align-self 为 auto，且父容器的 align-items 为 stretch，子元素的高度可能会被拉伸。此时，可以尝试将 align-self 设置为 flex-start 或 center，以防止子元素被拉伸超出容器高度。需要注意的是，stretch 仅对高度为 auto 的子元素生效，对于固定高度的子元素，stretch 值会被忽略，子元素将保持其原始高度，这可能导致溢出。
验证子元素高度是否为 auto
除了 align-self 属性，子元素的高度设置也是导致溢出的关键因素。如果子元素的高度被显式设置为固定值，例如 height: 60px，而父容器的高度仅为 50px，那么即使 align-self 设置为 stretch，子元素也不会被拉伸，而是保持其固定高度，从而导致溢出。因此，第二步是检查子元素的高度是否为 auto。如果子元素的高度是固定的，那么 align-self 的 stretch 值不会生效，子元素将保持其原始高度，这可能导致溢出。
可以通过开发者工具检查子元素的计算样式，查看其高度值。如果子元素的高度为 auto，那么 align-self 的 stretch 值可能会生效，子元素的高度会被拉伸至填满容器。如果子元素的高度是固定的，那么 align-self 的 stretch 值不会生效，子元素将保持其原始高度，这可能导致溢出。此时，可以尝试将子元素的高度设置为 auto，或者调整父容器的高度以适应子元素的高度。
确认父容器高度限制
父容器的高度限制也是导致子元素溢出的重要因素。如果父容器的高度被设置为固定值，例如 height: 120px，而子元素的高度为 60px，那么子元素不会被拉伸，而是保持其原始高度，这不会导致溢出。但是，如果父容器的高度被设置为固定值，例如 height: 50px，而子元素的高度为 60px，那么子元素不会被拉伸，而是保持其原始高度，这会导致溢出。因此，第三步是确认父容器的高度是否为固定值，以及是否足够容纳子元素的高度。
可以通过开发者工具检查父容器的计算样式，查看其高度值。如果父容器的高度为 auto，那么子元素的高度可能会被拉伸至填满容器。如果父容器的高度为固定值，那么子元素的高度可能会被拉伸至填满容器，或者保持其原始高度，这取决于子元素的高度是否为 auto。如果父容器的高度为固定值，且子元素的高度为 auto，那么子元素的高度可能会被拉伸至填满容器。如果父容器的高度为固定值，且子元素的高度为固定值，那么子元素的高度可能会被拉伸至填满容器，或者保持其原始高度，这取决于子元素的高度是否为 auto。
使用 overflow 属性处理溢出
如果子元素的高度无法调整，或者父容器的高度无法调整，那么可以使用 overflow 属性来处理溢出。overflow 属性可以控制子元素溢出时的显示方式，例如 hidden、scroll 或 auto。如果子元素的高度超出了父容器的高度，那么可以使用 overflow: hidden 来隐藏溢出的部分，或者使用 overflow: scroll 来显示滚动条。如果子元素的高度超出了父容器的高度，那么可以使用 overflow: auto 来显示滚动条，或者使用 overflow: visible 来显示溢出的部分。
可以通过开发者工具检查父容器的计算样式，查看其 overflow 属性的值。如果父容器的 overflow 属性为 visible，那么子元素的高度可能会被拉伸至填满容器，或者保持其原始高度，这取决于子元素的高度是否为 auto。如果父容器的 overflow 属性为 hidden，那么子元素的高度可能会被拉伸至填满容器，或者保持其原始高度，这取决于子元素的高度是否为 auto。如果父容器的 overflow 属性为 scroll，那么子元素的高度可能会被拉伸至填满容器，或者保持其原始高度，这取决于子元素的高度是否为 auto。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。