오버플로우와 스크롤 컨테이너

<div class="wrap" id="wrap">
  <div class="cell"><b>visible</b><div class="box vis"><i></i><i></i><i></i><i></i></div></div>
  <div class="cell"><b>hidden</b><div class="box hid"><i></i><i></i><i></i><i></i></div></div>
  <div class="cell"><b>scroll</b><div class="box scr"><i></i><i></i><i></i><i></i></div></div>
  <div class="cell"><b>auto</b><div class="box aut"><i></i><i></i><i></i><i></i></div></div>
</div>

.wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:18px 14px;row-gap:44px;
  width:min(94%,480px);transition:width 2.6s cubic-bezier(.4,0,.2,1)}
.cell{display:flex;flex-direction:column;align-items:center;gap:6px}
.cell b{font:700 10px/1 ui-monospace,monospace;color:var(--muted)}
.box{position:relative;width:72px;height:56px;border:2px solid var(--line);border-radius:8px;background:var(--surface)}
.vis{overflow:visible}
.hid{overflow:hidden}
.scr{overflow:scroll}
.aut{overflow:auto}
.box i{display:block;height:13px;margin:4px 8px;border-radius:3px;background:var(--accent)}
.box i:nth-child(even){background:var(--accent-3)}

const wrap = document.getElementById('wrap');
setInterval(() => wrap.style.width = wrap.style.width === '48%' ? 'min(94%, 480px)' : '48%', 2600);