css实现横向滚动样式的两种方法小记

横向滚动样式实现的两种方法小记。

<div className={styles.father}>
    <div className={styles.child}>1</div>
    <div className={styles.child}>2</div>
    <div className={styles.child}>3</div>
  </div>

1.display: inline-block;

  .father{
    width: 100px;
    height: 50px;
    overflow-x: scroll;
    white-space: nowrap;
    .child{
      display: inline-block;
      width: 50px;
      border: 1px solid red;
    }
  }

2.flex-shrink: 0;

  .father{
    width: 100px;
    height: 50px;
    overflow-x: scroll;
    display: flex;
    flex-wrap: nowrap;
    .child{
      flex-shrink:0;
      width: 50px;
      border: 1px solid red;
    }
  }

以上。