[Vuejs]-Scroll a part of a fixed container with nested flex containers (vue/tailwind)

by

0👍

Try to add the below given classes. Demo

<div class="flex min-h-screen max-h-screen overflow-hidden p-4">
  <div class="flex flex-1">
    <div class="flex flex-1 bg-blue-100">
      <div class="flex flex-col flex-1">
        <div class="flex h-48 bg-gray-50">1</div>
        <div class="flex h-48 bg-gray-100">2</div>
        <div class="flex flex-1 bg-gray-200 overflow-x-hidden">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores eos aliquid tenetur at reprehenderit rem fugit provident sed, est eligendi animi quo quod suscipit labore tempora mollitia ratione ut quasi? Praesentium fugiat rem, sed, animi veniam esse expedita, distinctio exercitationem aperiam rerum magnam vel doloremque! Aliquid eos minima atque soluta voluptatum, saepe in aliquam numquam quo inventore, dolores tempora omnis. Eveniet exercitationem temporibus aspernatur quibusdam tenetur! Debitis nisi facere necessitatibus blanditiis distinctio atque repudiandae ipsum autem. Consequatur maiores ut illum aliquam, non, numquam provident explicabo ex, vero in sit amet? Expedita optio veniam nulla odio, culpa aut officia excepturi iste! Quo veniam distinctio soluta corrupti? Ex quidem nihil, aspernatur soluta dignissimos optio, natus at totam blanditiis dolores inventore mollitia officia? Deserunt tenetur eaque iste, non et id molestiae vitae ex quisquam aspernatur eum, voluptates vero, perspiciatis molestias nam ipsam exercitationem qui nemo ratione ab consectetur blanditiis quaerat debitis ad? Repudiandae.</div>
      </div>
    </div>
    <div class="flex flex-1">22</div>
    <div class="flex flex-1">33</div>
  </div>
</div>

Leave a comment