<div class="container max-width-sm padding-y-md">
<!-- set fixed-height and add smooth scrolling 👇 -->
  <div class="bg radius-md shadow-xs padding-md overflow-auto scroll-smooth scroll-padding-md" style="height: calc(100vh - var(--space-md) * 2)">
    <p class="margin-bottom-md"><a class="link" href="#next-section">Scroll to the next section ↓</a></p>
    
    <div class="text-component text-component--relaxed color-contrast-medium">
      <h1>Smooth Scrolling in CodyFrame v4</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda rerum dicta deserunt nostrum dolore doloremque. Error deserunt blanditiis sint, eveniet fuga nulla labore mollitia id voluptatum asperiores nemo eum modi quod aperiam ad in reprehenderit fugiat dignissimos. Expedita, sed ex eius fuga saepe eaque asperiores. Laborum deserunt molestiae adipisci ipsam voluptates ex aperiam possimus. Sunt aspernatur quod expedita commodi minima distinctio quibusdam cupiditate accusamus impedit sequi assumenda aperiam qui facere et, neque, saepe libero at amet ullam! Itaque fugiat consequatur earum, maxime velit est inventore rem at quam, deserunt nihil atque quasi culpa maiores veritatis similique, eligendi sequi pariatur! Itaque asperiores sint vitae rerum laudantium, error accusantium libero ullam mollitia eaque cupiditate animi accusamus maxime laboriosam, distinctio saepe nihil dolorem atque quam et culpa? Cum voluptas dolor, officiis asperiores quisquam iure accusamus nobis explicabo repellat voluptatibus? Incidunt iure quasi officia fugiat in reiciendis? Tenetur eligendi quasi iste enim eos labore, excepturi repudiandae fugiat non officiis nesciunt quaerat explicabo modi laborum ipsam deleniti accusantium ex. Excepturi iste vero quibusdam atque aspernatur iure reiciendis, libero ut labore debitis illo obcaecati magni molestias error eius culpa fuga corrupti ad dignissimos tenetur! Nemo architecto optio enim iusto ducimus voluptatibus consequuntur omnis aliquam sit iste voluptate corporis quasi deserunt, illum eveniet sapiente nesciunt doloribus cum eos, corrupti sequi voluptates minus dignissimos veritatis. Maiores, distinctio commodi placeat totam adipisci ut velit nostrum repudiandae, eaque sunt, quibusdam laborum itaque illo quo ratione suscipit facere praesentium modi? Incidunt beatae ipsum unde quas necessitatibus fugit. Praesentium saepe, corporis accusamus magni quod amet iste assumenda minima quasi dicta maxime libero culpa autem ullam quidem impedit, nesciunt consequatur harum, illo quos delectus illum. Corrupti ex deserunt eos. Mollitia reiciendis quasi illum, vitae reprehenderit rerum tenetur aut sapiente? Consectetur nostrum, quia, pariatur voluptatibus voluptatum, vitae fugiat aut facere adipisci quisquam quae aperiam!</p>
      <h2 id="next-section">Next section</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, et sapiente laudantium repudiandae illo at suscipit officiis similique! Sit magni culpa exercitationem facere illum sed dolore voluptates quam dignissimos minus. Ullam dolorum aperiam quod recusandae delectus perspiciatis. Amet adipisci consectetur fuga, nam quo placeat nulla assumenda doloremque, deserunt est consequuntur beatae dolorum nobis voluptatum iste debitis modi dolores iusto voluptates repellendus. Neque error, maiores at natus maxime doloremque earum ad, praesentium assumenda tempore iure perspiciatis. Quod ex vero atque sapiente?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nostrum sunt tenetur veritatis illum porro labore adipisci doloribus consectetur quo natus eveniet quas architecto repellat ex obcaecati laboriosam dicta sed facere consequatur atque, unde enim eos ipsum? Quas, voluptatibus illum assumenda eos ad vitae aut totam, possimus dolorum, rerum amet?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum deleniti optio quia voluptatem, accusantium voluptas dolor asperiores quisquam natus. Reiciendis praesentium asperiores sequi! Vero, sed illo ipsum unde amet in.</p>
    </div>
  </div>
</div>