​

html,

body {

    width: 100%;

    height: 100%;

}

body {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 2vmax;

    box-sizing: border-box;

}

​

.horizontal-box,

.vertical-box {

    display: flex;

    flex-direction: row;

    width: 700px;

    justify-content: space-between;

}

​

ul {

    font-size: 0;

    position: relative;

    width: 620px;

    display: flex;

    flex-wrap: nowrap;

    flex-direction: row;

}

​

li {

    width: 200px;

    flex-shrink: 0;

    font-size: 5rem;

    line-height: 200px;

    text-align: center;

    scroll-snap-align: center;

    //scroll-snap-stop: always;

    //scroll-margin: 10px;

    background: #cba;

    margin-right: 40px;

}

​

.snap {

    width: 420px;

    height: 200px;

    overflow: auto;

    scroll-snap-type: x mandatory;

    border: 1px solid black;

}

​

li:nth-child(2) {

    width: 320px;

}

​

li:nth-child(3) {

    width: 160px;

}

​

li:nth-child(4) {

    width: 250px;

}

​

li:nth-child(5) {

    width: 320px;

}

​

li:nth-child(6) {

    width: 120px;

}

​

li:nth-child(7) {

    width: 250px;

}

​