专栏介绍

hello，大家好，我是tyus，最近打算在尝试做一些自己在日常开发中遇到的一些问题记录，希望能够在以后的工作中能够在中回顾一下，做一下记录，也希望能够帮助到大家解决日常的一下问题。

场景：

本次遇到的问题是如何在flex布局中使用overflow不生效的问题。由于flex布局会让元素等比例自适应，如果父元素设置了300px，但是底下有5个子元素，但是子元素宽度为100元素，溢出的200元素会由于flex布局的影响下，会等比例将元素的宽度设置为60px，因此在flex布局中并不存在溢出的情况，导致我们无法使用overflow。但是我们有时候就是想使用flex布局，并且溢出显示滚动条怎么办呢。没关系，先让我们看看实际的情况。

代码：

<style>
  .container{
    display: flex;
  }

  .demo1-content{
      display: flex;
      width: 300px;
      background: aquamarine;
      overflow: auto;
  }

  .block{
      border: 1px solid #000000;
      padding: 0 10px;
      margin-left: 10px;
      width:100px;
  }

  .block:first-child{
      margin-left: 0;
  }
</style>
<body>
  <div class="container">
      <div class="demo1">
          <h1>flex布局如何使用overflow</h1>
          <div class="demo1-content box">
              <div class="block">文本1</div>
              <div class="block">文本1</div>
              <div class="block">文本1</div>
              <div class="block">文本1</div>
              <div class="block">文本1</div>
              <div class="block">文本1</div>
          </div>
      </div>
  </div>
</body>
</html>

效果如图：

看到效果了吗，设置了block元素为宽度为100px，但是由于flex布局的影响下，只能等比例进行分配宽度。

如何解决

我们只需要在子元素中加入flex-shrink: 0;的样式

flex-shrink有什么用？

flex-shrink：1 : 默认值, 等于1时，当父元素宽度不够用时，子元素自己调整自己所占的宽度比，所有子元素大家同时缩小来适应总宽度。 flex-shrink：0 : 表示大家都不缩小适应，根据自身的宽度进行排版。

那么我们接下来把block的样式加入flex-shrink：0

.block{
    border: 1px solid #000000;
    padding: 0 10px;
    margin-left: 10px;
    width: 100px;
    flex-shrink: 0;
}

效果如图：

滚动条出现了~~~~~

总结

这篇文章有点简单，但是由于自己是一个flex布局的重度使用者，因此也希望记录一下flex布局下遇到的一些问题，当然主要还是自己不熟悉flex布局的原因。最后也希望这篇文章能够帮助到大家在日常开发中解决问题。感谢观看，古德拜~

flex布局下使用overflow不生效

专栏介绍

场景：

如何解决

flex-shrink有什么用？

总结