How can I use scroll snap with container wrapped?-CodePudding

How can I use scroll-snap property on the next code?:

.wrapper {
  width: 100px;
  height: 100px;
  overflow: scroll;
}

.wrapper > div {
  width: 300px;
  height: 100px;
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: black 1px dotted;
}

<div >
  <div>
    <div >1</div>
    <div >2</div>
    <div >3</div>
  </div>
</div>

I can just remove .wrapper on this example code, but my actual code don't let me do that.

CodePudding user response：

is this what you're looking for?

.wrapper {
  width: 100px;
  height: 100px;
  overflow: scroll;
  scroll-snap-type: x mandatory;
}

.wrapper > div {
  width: 300px;
  height: 100px;
  display: flex;
  
}

.item {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: black 1px dotted;
  scroll-snap-align: start;
}

<div >
  <div>
    <div >1</div>
    <div >2</div>
    <div >3</div>
  </div>
</div>