flex必看技巧：flex为1的父元素被子元素挤出屏幕怎么办？ 点击关注公众号，“技术干货”及时达！ 需求与问题描述需求简介在前端开发中，我们经常会遇到这样的布局：在一个容器中，排布有两个元素，A元素宽度固定，B元素宽度自适应，如下图： 我们的CSS也能随手捏来 div class="card-content-wrap" div class="left"左边元素固定宽度308px------------------/div div class="right" 右边元素flex:1 /div/div style lang="less" scoped.card-content-wrap { width: 1000px; border: 1px solid blue; display: flex; justify-content: space-between; .left { width: 308px; margin-right: 16px; } .right { flex: 1; }}/style上述代码中，我们使用flex: 1的属性让右边的元素占满了剩余空间 问题描述在一些普通场景中，上述用法是完全没有问题的，但是，当这个自适应元素（父元素）内部有子元素且子元素宽度大于父元素时，问题就出现了。 「子元素较宽，导致左侧固定元素被挤压：」 div class="card-content-wrap" div class="left"左边元素固定宽度308px------------------/div div class="right" 右边元素flex:1 div style="width: 920px; border: 1px #ff2d2d solid" 子元素较大，导致左侧固定元素被挤压 /div /div/div「子元素非常宽，导致左侧元素被挤压，右侧元素超出安全区域：」 div class="card-content-wrap" div class="left"左边元素固定宽度308px------------------/div div class="right" 右边元素flex:1 div style="width: 1220px; border: 1px #ff2d2d solid" 子元素宽度过大,导致父元素被挤出屏幕 /div /div/div显然，上述的样式问题和我们期望的行为不一致，那么我们该如何优雅的解决这个问题呢？ 解决方案我们先说解决方案，在具体分析原因 使用overflow: hidden给flex: 1的父元素设置「overflow: hidden」可以解决上述问题。但是如果需要父元素出现滚动条的情况，这种方式显然不合适。 style lang="less" scoped.card-content-wrap { width: 1000px; border: 1px solid blue; display: flex; justify-content: space-between; .left { width: 308px; margin-right: 16px; } .right { flex: 1; overflow: hidden; }}/style 使用width:0这是最佳的解决方案。 div class="card-content-wrap"style lang="less" scoped.card-content-wrap { width: 1000px; border: 1px solid blue; display: flex; justify-content: space-between; .left { width: 308px; margin-right: 16px; } .right { flex: 1; width: 0; }}/style 且这种方式可以完美解决父元素需要出现滚动条的情况。 .right { flex: 1; width: 0; overflow: auto;} 使用min-width:0「min-width:0」的效果和「width:0」效果完全一致。 .right { flex: 1; min-width: 0; overflow: auto;} 竖直方向的布局如何解决对于竖直方向其实也存在相同的问题 解决方案其实和水平方向完全一致 设置「overflow: hidden」 .bottom{ flex: 1; overflow: hidden;}或者设置「height: 0」 .bottom{ flex: 1; height: 0;}或者设置「min-height: 0」 .bottom{ flex: 1; min-height: 0;}问题原因flex: 1 是 CSS 中用于弹性布局（Flexbox）的一个简写属性，用于在容器内分配多余空间或者收缩元素以适应容器大小。它综合了 「flex-grow」、「flex-shrink」 和 「flex-basis」 三个属性的值。 当使用 flex: 1 时，你实际上是在设置： flex-grow: 1：元素会尝试占据多余的空间。flex-shrink: 1：元素在必要时会缩小。flex-basis: 0%：元素的默认大小是 0，这意味着它会完全依赖 flex-grow 来分配空间。基于上述基础知识，简单来说问题的原因就在于flex属性只是对父元素的多余空间按什么比例去分配，并不是按我们的理解意思为「固定分配」的方式，不会对子元素原本实际内容宽度进行处理！ 浏览器默认为flex容器的子元素设置了 “「min-width: auto;min-height: auto」”，这意味着子元素的最小宽度和高度不能小于其内容的宽度和高度。 我们设置为「min-width: 0」，覆盖掉了其默认行为，即使其内容为空或者宽度很小，也可以使得flex子元素在flex容器中正确地布局。 点击关注公众号，“技术干货”及时达！ 阅读原文