关于弹性盒flex布局overflow无作用问题

flex弹性盒较为方便，可以节省我们很多布局时间，但是有时候可能会出现一点问题

    <div className={styles.main_box}> //布局
      <div className={styles.left_box}></div>
      <div className={styles.right_box}>
        <div className={styles.right_header}></div>
        <div className={styles.right_main}>
          <div className={styles.scroll_box}>
            <div></div>
          </div>
        </div>
      </div>
    </div>

css

.main_box {
  flex: 1;
  display: flex;
  background: #fff;
  .left_box {
    width: 600px;
    height: 100%;
    background: red;
  }
  .right_box {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: blue;
    .right_header {
      width: 100%;
      height: 300px;
      background: black;
    }
    .right_main {
      flex: 1;
      display: flex;
      .scroll_box {
        flex: 1;
        overflow: auto;
        background: yellow;
        >div {
          height: 1600px;
          background: palegoldenrod;
        }
      }
    }
  }
}

经过层层的弹性盒自适应布局，最终我给了类名为scroll_box的div内容超出滚动的样式，但是会发现并没有作用，内容超出时还是会让整个布局进行滚动而不是在我想要的区域滚动，这时候**我给其父级自适应的盒子添加height：1px,**这样才达到我想要的效果。包括有时我们弹性盒左边固定宽度，右边自适应，但是布局会超出宽度也有可能是这个问题，可以试着给横向布局自适应的盒子添加width：1px

.right_main {
      flex: 1;
      height: 1px; //新添加属性············
      display: flex;
      .scroll_box {
        flex: 1;
        overflow: auto;
        background: yellow;
        >div {
          height: 1600px;
          background: palegoldenrod;
        }
      }
    }

同时注意：弹性盒不能和滚动共存，也就是说当一个盒子有display：flex属性时 不要使用overflow，真想添加的话可以在弹性盒里写一个子盒子，然后给这个子盒子添加obverflow