<div class="wrap"> <div class="inner"> <ul> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお</li> </ul> </div> </div>
* { box-sizing: border-box; } .wrap { position: relative; } .inner { width: 150px; height: 120px; overflow-y: scroll; &::before { content: ""; position: absolute; width: 130px; height: 100%; background-color: #feffea; border: 1px solid #eea271; } ul { position: relative; margin: 0; padding: 5px; list-style: none; z-index:1; } li { display: flex; justify-content: center; align-items: center; width: 122px; height: 40px; background-color: #ccc; &:nth-child(n+2) { margin-top: 5px; } } }