【CSS】解决flex布局下，子元素宽度超出父容器宽度后被压缩

1）实现子元素不压缩，超出宽度且在不显示滚动条的情况下能左右滚动

• 给每个子元素添加 flex-shrink: 0
• 父元素 overflow: auto
• 父元素伪类 father::-webkit-scrollbar { display : none }

2）代码

<div class="father">
    <div class="son">div>
div>

<style>
.father {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
}
.son {
  width: 100px;
  height: 100%;
  background-color: #999;
  flex-shrink: 0;
}
.father::-webkit-scrollbar {
  display: none;
}
style>

3）flex-shrink 的补充

• 指定了 flex 元素的收缩规则（默认宽度之和大于父容器宽度 时才会收缩）
• 通过指定子元素的收缩比例，溢出部分按该比例来收缩
• 如 A：B = 1：2，超出 90px 的部分，由 AB 的比例来分，A需被收缩30px，B需被收缩60px

4）示例
没有使用 flex-shrink（可以看到，字被挤压换行，说明宽度被挤压）

使用了 flex-shrink：0（尽管父容器被挤压，但字未被换行，说明宽度保持原来不变）