htmlcssflexboxoverflow

How can I add a scrollable container inside a flex column layout?

I have a simple flex column layout and some CSS helper classes (I added everything to the runnable code snippet).

Everything looks good...

partial result

...until I add a lot of text inside the red div.

wrong outcome

/* Height helpers */

.h-screen {
  height: 100vh !important;
}

.h-100 {
  height: 100% !important;
}

/* Flex helpers */

.d-flex {
  display: flex !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

/* Color helpers */

.bg-white {
  background: white !important;
}

.bg-blue {
  background: blue !important;
}

.bg-red {
  background: red !important;
}

/* Other */

body {
  margin: 0;
}

.container {
  padding: 12px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <div class="h-screen d-flex flex-column bg-white">
      <div style="height: 40px" class="bg-blue"></div>
      <div class="container flex-grow-1">
        <div class="h-100 bg-red">
          Lorem ipsum dolor, sit amet consecteturadipisicing elit. Magnam accusantium rerum, praesentium asperiores fugit alias repellat culpa magni nemo, est totam velit aliquid inventore! Possimus, repellat a illo labore fugiat reprehenderit amet ad ducimus quaerat. Fugit repellendus numquam nisi, officia assumenda cumque vitae. Culpa quo, ipsa, laudantium id deserunt sunt, possimus nam praesentium assumenda eveniet officia accusamus dolorum incidunt eaque reiciendis quam quod? Vitae repellat aliquam labore ad ullam, fugiat dolorem eveniet. Officia sunt culpa tempore ea, qui, molestiae ad rerum quibusdam voluptates necessitatibus quos nesciunt alias itaque maxime exercitationem obcaecati veritatis sed omnis totam atque maiores amet! Voluptates quasi, voluptatum quo fuga facilis error. Veniam eveniet alias possimus suscipit tempore facilis commodi soluta voluptates ex, iure illum natus numquam sit totam recusandae nobis nemo saepe quia delectus fugit velit necessitatibus inventore atque itaque. Dolor voluptatum ratione fugit quia ullam, sit nobis laudantium ad possimus molestias, cupiditate dolore? Quia dolorum quasi quas pariatur eum ex perspiciatis aspernatur doloremque, maiores rem deleniti ratione accusantium nisi ipsam. Quidem id vel dolorum atque praesentium laboriosam ad ratione nobis? Magni, velit pariatur error adipisci hic aut culpa sequi ratione, incidunt unde facere accusamus. Voluptatem amet ea perspiciatis possimus ratione expedita suscipit similique rem. Ipsum, adipisci! Vero porro aperiam corrupti quas incidunt pariatur qui delectus eos nihil voluptatem! Soluta, ipsum maiores, esse perspiciatis ducimus commodi alias harum laborum modi mollitia non maxime incidunt omnis rem odit asperiores error repellendus architecto doloremque ab? Non ullam eaque magni vitae amet explicabo et cum? Eos nihil, illo, adipisci quaerat modi omnis nisi repudiandae fugit optio excepturi temporibus dolorum! Nihil, hic! Earum asperiores labore fuga quos. Sapiente corporis hic vero atque distinctio ad vel expedita soluta error suscipit quas ab, nemo beatae similique minus ducimus repellat facere magnam sed quidem asperiores repudiandae sit facilis voluptates? Veniam animi, necessitatibus facere ratione dolores vel, ipsa assumenda adipisci impedit, nisi iste exercitationem. Provident velit aut perferendis officiis ducimus natus optio odio repellat, enim repellendus, facere facilis minima quo nostrum ea. Rem doloremque cupiditate distinctio excepturi maiores animi, eos laboriosam iusto quia iste vitae eius quisquam fugit magnam perferendis ea quas ratione. Totam sit aperiam eius praesentium, tempore assumenda impedit id nemo natus provident vitae, voluptates aliquam labore. Eos, nihil? Fugit alias tempore ut nesciunt unde, nostrum odio, dolorum consequuntur quae non veritatis iure pariatur, asperiores architecto. Numquam, veritatis nobis modi repellat maxime blanditiis odio, sed iusto expedita quaerat eos quasi repudiandae soluta cupiditate perferendis ex voluptatibus veniam! Et cum corrupti nam, sint id illo natus alias totam neque perspiciatis eaque quisquam? Ab nemo rem aspernatur voluptate quam, deleniti earum modi perspiciatis sapiente dicta mollitia, officia dolorem ea, blanditiis facilis enim vel harum sunt voluptas quaerat nam. Recusandae, cumque atque? Sit, libero? Fuga illum temporibus rem optio qui officia quam neque alias nesciunt exercitationem aspernatur vero quaerat laudantium asperiores dolorem id, consectetur reprehenderit numquam maiores dolor. Accusamus molestiae, commodi soluta quia nihil quas deserunt similique pariatur ab unde non perspiciatis quis fugit tenetur officia mollitia iusto iste aliquam asperiores eos dignissimos? Minima rem nobis sapiente blanditiis eos ad laborum molestias perspiciatis ratione doloremque, doloribus reiciendis commodi, dolor aliquid itaque id. Culpa laudantium, earum eos perferendis unde dolorem, nisi quis illum asperiores rerum iste in amet nam qui ad quibusdam quod sint reiciendis maxime? Nesciunt quas fuga neque recusandae porro cumque, adipisci ratione. Cum voluptatum itaque quisquam aliquid perspiciatis. Repudiandae neque in quo recusandae officiis. Dolores qui explicabo sapiente dolorum quam similique. Ratione, sapiente sequi sint aliquam cupiditate expedita sunt quos vel est obcaecati molestias, quod atque adipisci assumenda quibusdam reiciendis animi! Temporibus debitis atque sed qui vel sequi ex corrupti assumenda, at explicabo possimus illo quia eos dolore reprehenderit architecto! Qui quos excepturi at ut eum quam similique voluptate quisquam amet quo laboriosam voluptatibus adipisci dolorum accusamus nostrum sunt tenetur, vitae eos! Quam libero magnam, excepturi ad vero tenetur autem atque, neque beatae culpa blanditiis maxime delectus. Temporibus, dolores. Eaque commodi, quis distinctio repudiandae illum consequatur optio? Illum rerum sequi consectetur libero velit cupiditate quidem harum iure praesentium dolorem recusandae numquam ratione laudantium exercitationem pariatur obcaecati earum eos voluptas expedita, impedit inventore iste! Debitis dignissimos quasi, earum quod ipsam nisi incidunt nesciunt assumenda. Sunt veritatis labore expedita quas incidunt quod dicta repellat ratione! Aperiam ullam porro voluptates sapiente voluptatum quam dolores, pariatur quaerat consectetur minima. Soluta, eos voluptatibus minima, tempore explicabo, officiis praesentium atque facere velit ipsum doloribus illum! Eligendi optio repellat, inventore amet laudantium aliquam, corporis a reprehenderit animi reiciendis est magni fugiat explicabo quaerat repudiandae. Consequuntur molestias beatae magnam? Sunt aut similique quo at incidunt corporis repudiandae vero rem, iure officia ducimus molestias nam. Laudantium cumque earum laboriosam, nihil neque est obcaecati non consectetur cupiditate quam consequuntur beatae modi quis vel quos alias magni harum consequatur natus sapiente quibusdam quaerat! Nemo rerum reiciendis culpa porro explicabo sed! Doloremque rem veritatis aspernatur molestiae iste facilis ut odit voluptates non. Soluta laboriosam laborum harum voluptatum recusandae nobis non maxime dignissimos. Accusamus totam odit temporibus hic corporis ratione quo culpa ipsum officia sequi, est quaerat illo quos reiciendis impedit modi doloremque iure molestias neque? Eius cupiditate rerum consequuntur accusantium, aperiam unde mollitia doloremque explicabo ea libero hic aliquam quisquam vel, optio molestiae dolor assumenda esse eligendi fuga illo fugiat? Sed ratione, veniam ullam molestias quo repellat rem. Perspiciatis illum quaerat neque eveniet, dicta error, velit omnis assumenda voluptatem iusto enim voluptatum eius incidunt cum nam quidem molestias blanditiis dolore beatae saepe ea. Rem maxime dolore doloremque vero beatae eos voluptatibus dignissimos, eligendi officia assumenda rerum laboriosam minima, neque autem nemo, alias molestias ipsa? Distinctio pariatur voluptatibus magni facere. Praesentium ex suscipit, hic quam debitis nulla possimus sed vitae commodi quo ipsum excepturi quidem, beatae, earum modi temporibus fugiat quisquam voluptas dolores! Deserunt ea reiciendis quae consequuntur perspiciatis tempora necessitatibus assumenda voluptas aperiam dignissimos, a nisi sapiente accusantium impedit facere distinctio quam laborum? Facere, facilis possimus. Blanditiis hic rem dolorem facere officiis adipisci, architecto, iste quod numquam nam aut saepe? At vitae cumque repudiandae quae rem quisquam possimus modi commodi illum! Minus assumenda quis cupiditate.
        </div>
        </div>
    </div>
  </body>
</html>

As you can see, the whole page is scrollable and the blue div disappeared. How can I make the red div scrollable and keep the rest as is?

Edit #1

Thanks to @Sensei_Shoh insights, I managed to reach below result

/* Height helpers */

.h-screen {
  height: 100vh;
}

.h-100 {
  height: 100%;
}

/* Flex helpers */

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

/* Color helpers */

.bg-black {
  background: black;
}

.bg-blue {
  background: blue;
}

.bg-purple {
  background: purple;
}

.bg-grey {
  background: grey;
}

.bg-brown {
  background: brown;
}

/* Overflow helpers */

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

/* Other */

body {
  margin: 0;
}

.rectangle {
  height: 40px;
}

.container {
  padding: 12px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <div class="h-screen d-flex flex-column bg-black">
      <div class="busy-area flex-shrink-0">
        <div class="rectangle bg-blue"></div>
        <div class="rectangle bg-purple"></div>
      </div>
      <div class="container flex-grow-1 overflow-y-hidden bg-grey">
        <div class="h-100 overflow-y-auto bg-brown">
          Lorem ipsum dolor, sit amet consecteturadipisicing elit. Magnam accusantium rerum, praesentium asperiores fugit alias repellat culpa magni nemo, est totam velit aliquid inventore! Possimus, repellat a illo labore fugiat reprehenderit amet ad ducimus quaerat. Fugit repellendus numquam nisi, officia assumenda cumque vitae. Culpa quo, ipsa, laudantium id deserunt sunt, possimus nam praesentium assumenda eveniet officia accusamus dolorum incidunt eaque reiciendis quam quod? Vitae repellat aliquam labore ad ullam, fugiat dolorem eveniet. Officia sunt culpa tempore ea, qui, molestiae ad rerum quibusdam voluptates necessitatibus quos nesciunt alias itaque maxime exercitationem obcaecati veritatis sed omnis totam atque maiores amet! Voluptates quasi, voluptatum quo fuga facilis error. Veniam eveniet alias possimus suscipit tempore facilis commodi soluta voluptates ex, iure illum natus numquam sit totam recusandae nobis nemo saepe quia delectus fugit velit necessitatibus inventore atque itaque. Dolor voluptatum ratione fugit quia ullam, sit nobis laudantium ad possimus molestias, cupiditate dolore? Quia dolorum quasi quas pariatur eum ex perspiciatis aspernatur doloremque, maiores rem deleniti ratione accusantium nisi ipsam. Quidem id vel dolorum atque praesentium laboriosam ad ratione nobis? Magni, velit pariatur error adipisci hic aut culpa sequi ratione, incidunt unde facere accusamus. Voluptatem amet ea perspiciatis possimus ratione expedita suscipit similique rem. Ipsum, adipisci! Vero porro aperiam corrupti quas incidunt pariatur qui delectus eos nihil voluptatem! Soluta, ipsum maiores, esse perspiciatis ducimus commodi alias harum laborum modi mollitia non maxime incidunt omnis rem odit asperiores error repellendus architecto doloremque ab? Non ullam eaque magni vitae amet explicabo et cum? Eos nihil, illo, adipisci quaerat modi omnis nisi repudiandae fugit optio excepturi temporibus dolorum! Nihil, hic! Earum asperiores labore fuga quos. Sapiente corporis hic vero atque distinctio ad vel expedita soluta error suscipit quas ab, nemo beatae similique minus ducimus repellat facere magnam sed quidem asperiores repudiandae sit facilis voluptates? Veniam animi, necessitatibus facere ratione dolores vel, ipsa assumenda adipisci impedit, nisi iste exercitationem. Provident velit aut perferendis officiis ducimus natus optio odio repellat, enim repellendus, facere facilis minima quo nostrum ea. Rem doloremque cupiditate distinctio excepturi maiores animi, eos laboriosam iusto quia iste vitae eius quisquam fugit magnam perferendis ea quas ratione. Totam sit aperiam eius praesentium, tempore assumenda impedit id nemo natus provident vitae, voluptates aliquam labore. Eos, nihil? Fugit alias tempore ut nesciunt unde, nostrum odio, dolorum consequuntur quae non veritatis iure pariatur, asperiores architecto. Numquam, veritatis nobis modi repellat maxime blanditiis odio, sed iusto expedita quaerat eos quasi repudiandae soluta cupiditate perferendis ex voluptatibus veniam! Et cum corrupti nam, sint id illo natus alias totam neque perspiciatis eaque quisquam? Ab nemo rem aspernatur voluptate quam, deleniti earum modi perspiciatis sapiente dicta mollitia, officia dolorem ea, blanditiis facilis enim vel harum sunt voluptas quaerat nam. Recusandae, cumque atque? Sit, libero? Fuga illum temporibus rem optio qui officia quam neque alias nesciunt exercitationem aspernatur vero quaerat laudantium asperiores dolorem id, consectetur reprehenderit numquam maiores dolor. Accusamus molestiae, commodi soluta quia nihil quas deserunt similique pariatur ab unde non perspiciatis quis fugit tenetur officia mollitia iusto iste aliquam asperiores eos dignissimos? Minima rem nobis sapiente blanditiis eos ad laborum molestias perspiciatis ratione doloremque, doloribus reiciendis commodi, dolor aliquid itaque id. Culpa laudantium, earum eos perferendis unde dolorem, nisi quis illum asperiores rerum iste in amet nam qui ad quibusdam quod sint reiciendis maxime? Nesciunt quas fuga neque recusandae porro cumque, adipisci ratione. Cum voluptatum itaque quisquam aliquid perspiciatis. Repudiandae neque in quo recusandae officiis. Dolores qui explicabo sapiente dolorum quam similique. Ratione, sapiente sequi sint aliquam cupiditate expedita sunt quos vel est obcaecati molestias, quod atque adipisci assumenda quibusdam reiciendis animi! Temporibus debitis atque sed qui vel sequi ex corrupti assumenda, at explicabo possimus illo quia eos dolore reprehenderit architecto! Qui quos excepturi at ut eum quam similique voluptate quisquam amet quo laboriosam voluptatibus adipisci dolorum accusamus nostrum sunt tenetur, vitae eos! Quam libero magnam, excepturi ad vero tenetur autem atque, neque beatae culpa blanditiis maxime delectus. Temporibus, dolores. Eaque commodi, quis distinctio repudiandae illum consequatur optio? Illum rerum sequi consectetur libero velit cupiditate quidem harum iure praesentium dolorem recusandae numquam ratione laudantium exercitationem pariatur obcaecati earum eos voluptas expedita, impedit inventore iste! Debitis dignissimos quasi, earum quod ipsam nisi incidunt nesciunt assumenda. Sunt veritatis labore expedita quas incidunt quod dicta repellat ratione! Aperiam ullam porro voluptates sapiente voluptatum quam dolores, pariatur quaerat consectetur minima. Soluta, eos voluptatibus minima, tempore explicabo, officiis praesentium atque facere velit ipsum doloribus illum! Eligendi optio repellat, inventore amet laudantium aliquam, corporis a reprehenderit animi reiciendis est magni fugiat explicabo quaerat repudiandae. Consequuntur molestias beatae magnam? Sunt aut similique quo at incidunt corporis repudiandae vero rem, iure officia ducimus molestias nam. Laudantium cumque earum laboriosam, nihil neque est obcaecati non consectetur cupiditate quam consequuntur beatae modi quis vel quos alias magni harum consequatur natus sapiente quibusdam quaerat! Nemo rerum reiciendis culpa porro explicabo sed! Doloremque rem veritatis aspernatur molestiae iste facilis ut odit voluptates non. Soluta laboriosam laborum harum voluptatum recusandae nobis non maxime dignissimos. Accusamus totam odit temporibus hic corporis ratione quo culpa ipsum officia sequi, est quaerat illo quos reiciendis impedit modi doloremque iure molestias neque? Eius cupiditate rerum consequuntur accusantium, aperiam unde mollitia doloremque explicabo ea libero hic aliquam quisquam vel, optio molestiae dolor assumenda esse eligendi fuga illo fugiat? Sed ratione, veniam ullam molestias quo repellat rem. Perspiciatis illum quaerat neque eveniet, dicta error, velit omnis assumenda voluptatem iusto enim voluptatum eius incidunt cum nam quidem molestias blanditiis dolore beatae saepe ea. Rem maxime dolore doloremque vero beatae eos voluptatibus dignissimos, eligendi officia assumenda rerum laboriosam minima, neque autem nemo, alias molestias ipsa? Distinctio pariatur voluptatibus magni facere. Praesentium ex suscipit, hic quam debitis nulla possimus sed vitae commodi quo ipsum excepturi quidem, beatae, earum modi temporibus fugiat quisquam voluptas dolores! Deserunt ea reiciendis quae consequuntur perspiciatis tempora necessitatibus assumenda voluptas aperiam dignissimos, a nisi sapiente accusantium impedit facere distinctio quam laborum? Facere, facilis possimus. Blanditiis hic rem dolorem facere officiis adipisci, architecto, iste quod numquam nam aut saepe? At vitae cumque repudiandae quae rem quisquam possimus modi commodi illum! Minus assumenda quis cupiditate.
        </div>
      </div>
    </div>
  </body>
</html>

Solution

  • You should avoid using !important flag as much as possible. It is really bad practice to use, as it typically causes much more harm than good. It should only ever really be used as a very last resort, and only in very specific situations — usually only when external styles are in the mix.

    Also, try to avoid inline styles as much as possible, as well, because it makes it a bit harder to utilize the cascade (of CSS), since inline styles are a higher specificity. Creating and assigning classes is better and makes it easier to work with the cascade, instead of against it, if that makes sense?

    As for your issue, you should use flex-basis: 40px instead of height: 40px, since you're using flex-box. You should also put flex-shrink: 0 on the .bg-blue element so that it doesn't shrink at all and stays visible. You'll also want to make the .container element a flex-box so that its contents can grow/shrink as needed. Then you'll want to put overflow: auto on the .container element so the browser knows where you want the scrollbar to be shown for overflowing contents. I added a auto-scroll class to your example and used that on the .container element as well as the child .bg-red element.

    After making the suggested changes as I've shown, I believe this will achieve what you're looking for?

    /* Height helpers */

.h-screen {
  height: 100vh;
}

.h-100 {
  height: 100%;
}

/* Flex helpers */

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-40 {
  flex-basis: 40px;
}

/* Color helpers */

.bg-white {
  background: white;
}

.bg-blue {
  background: blue;
}

.bg-red {
  background: red;
}

/* Other */

body {
  margin: 0;
}

.container {
  padding: 12px;
}

.auto-scroll {
  overflow: auto;
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <div class="h-screen d-flex flex-column bg-white">
      <div class="bg-blue flex-40 flex-shrink-0"></div>
      <div class="container d-flex flex-grow-1 auto-scroll">
        <div class="bg-red flex-grow-1 auto-scroll">
          Lorem ipsum dolor, sit amet consecteturadipisicing elit. Magnam accusantium rerum, praesentium asperiores fugit alias repellat culpa magni nemo, est totam velit aliquid inventore! Possimus, repellat a illo labore fugiat reprehenderit amet ad ducimus quaerat. Fugit repellendus numquam nisi, officia assumenda cumque vitae. Culpa quo, ipsa, laudantium id deserunt sunt, possimus nam praesentium assumenda eveniet officia accusamus dolorum incidunt eaque reiciendis quam quod? Vitae repellat aliquam labore ad ullam, fugiat dolorem eveniet. Officia sunt culpa tempore ea, qui, molestiae ad rerum quibusdam voluptates necessitatibus quos nesciunt alias itaque maxime exercitationem obcaecati veritatis sed omnis totam atque maiores amet! Voluptates quasi, voluptatum quo fuga facilis error. Veniam eveniet alias possimus suscipit tempore facilis commodi soluta voluptates ex, iure illum natus numquam sit totam recusandae nobis nemo saepe quia delectus fugit velit necessitatibus inventore atque itaque. Dolor voluptatum ratione fugit quia ullam, sit nobis laudantium ad possimus molestias, cupiditate dolore? Quia dolorum quasi quas pariatur eum ex perspiciatis aspernatur doloremque, maiores rem deleniti ratione accusantium nisi ipsam. Quidem id vel dolorum atque praesentium laboriosam ad ratione nobis? Magni, velit pariatur error adipisci hic aut culpa sequi ratione, incidunt unde facere accusamus. Voluptatem amet ea perspiciatis possimus ratione expedita suscipit similique rem. Ipsum, adipisci! Vero porro aperiam corrupti quas incidunt pariatur qui delectus eos nihil voluptatem! Soluta, ipsum maiores, esse perspiciatis ducimus commodi alias harum laborum modi mollitia non maxime incidunt omnis rem odit asperiores error repellendus architecto doloremque ab? Non ullam eaque magni vitae amet explicabo et cum? Eos nihil, illo, adipisci quaerat modi omnis nisi repudiandae fugit optio excepturi temporibus dolorum! Nihil, hic! Earum asperiores labore fuga quos. Sapiente corporis hic vero atque distinctio ad vel expedita soluta error suscipit quas ab, nemo beatae similique minus ducimus repellat facere magnam sed quidem asperiores repudiandae sit facilis voluptates? Veniam animi, necessitatibus facere ratione dolores vel, ipsa assumenda adipisci impedit, nisi iste exercitationem. Provident velit aut perferendis officiis ducimus natus optio odio repellat, enim repellendus, facere facilis minima quo nostrum ea. Rem doloremque cupiditate distinctio excepturi maiores animi, eos laboriosam iusto quia iste vitae eius quisquam fugit magnam perferendis ea quas ratione. Totam sit aperiam eius praesentium, tempore assumenda impedit id nemo natus provident vitae, voluptates aliquam labore. Eos, nihil? Fugit alias tempore ut nesciunt unde, nostrum odio, dolorum consequuntur quae non veritatis iure pariatur, asperiores architecto. Numquam, veritatis nobis modi repellat maxime blanditiis odio, sed iusto expedita quaerat eos quasi repudiandae soluta cupiditate perferendis ex voluptatibus veniam! Et cum corrupti nam, sint id illo natus alias totam neque perspiciatis eaque quisquam? Ab nemo rem aspernatur voluptate quam, deleniti earum modi perspiciatis sapiente dicta mollitia, officia dolorem ea, blanditiis facilis enim vel harum sunt voluptas quaerat nam. Recusandae, cumque atque? Sit, libero? Fuga illum temporibus rem optio qui officia quam neque alias nesciunt exercitationem aspernatur vero quaerat laudantium asperiores dolorem id, consectetur reprehenderit numquam maiores dolor. Accusamus molestiae, commodi soluta quia nihil quas deserunt similique pariatur ab unde non perspiciatis quis fugit tenetur officia mollitia iusto iste aliquam asperiores eos dignissimos? Minima rem nobis sapiente blanditiis eos ad laborum molestias perspiciatis ratione doloremque, doloribus reiciendis commodi, dolor aliquid itaque id. Culpa laudantium, earum eos perferendis unde dolorem, nisi quis illum asperiores rerum iste in amet nam qui ad quibusdam quod sint reiciendis maxime? Nesciunt quas fuga neque recusandae porro cumque, adipisci ratione. Cum voluptatum itaque quisquam aliquid perspiciatis. Repudiandae neque in quo recusandae officiis. Dolores qui explicabo sapiente dolorum quam similique. Ratione, sapiente sequi sint aliquam cupiditate expedita sunt quos vel est obcaecati molestias, quod atque adipisci assumenda quibusdam reiciendis animi! Temporibus debitis atque sed qui vel sequi ex corrupti assumenda, at explicabo possimus illo quia eos dolore reprehenderit architecto! Qui quos excepturi at ut eum quam similique voluptate quisquam amet quo laboriosam voluptatibus adipisci dolorum accusamus nostrum sunt tenetur, vitae eos! Quam libero magnam, excepturi ad vero tenetur autem atque, neque beatae culpa blanditiis maxime delectus. Temporibus, dolores. Eaque commodi, quis distinctio repudiandae illum consequatur optio? Illum rerum sequi consectetur libero velit cupiditate quidem harum iure praesentium dolorem recusandae numquam ratione laudantium exercitationem pariatur obcaecati earum eos voluptas expedita, impedit inventore iste! Debitis dignissimos quasi, earum quod ipsam nisi incidunt nesciunt assumenda. Sunt veritatis labore expedita quas incidunt quod dicta repellat ratione! Aperiam ullam porro voluptates sapiente voluptatum quam dolores, pariatur quaerat consectetur minima. Soluta, eos voluptatibus minima, tempore explicabo, officiis praesentium atque facere velit ipsum doloribus illum! Eligendi optio repellat, inventore amet laudantium aliquam, corporis a reprehenderit animi reiciendis est magni fugiat explicabo quaerat repudiandae. Consequuntur molestias beatae magnam? Sunt aut similique quo at incidunt corporis repudiandae vero rem, iure officia ducimus molestias nam. Laudantium cumque earum laboriosam, nihil neque est obcaecati non consectetur cupiditate quam consequuntur beatae modi quis vel quos alias magni harum consequatur natus sapiente quibusdam quaerat! Nemo rerum reiciendis culpa porro explicabo sed! Doloremque rem veritatis aspernatur molestiae iste facilis ut odit voluptates non. Soluta laboriosam laborum harum voluptatum recusandae nobis non maxime dignissimos. Accusamus totam odit temporibus hic corporis ratione quo culpa ipsum officia sequi, est quaerat illo quos reiciendis impedit modi doloremque iure molestias neque? Eius cupiditate rerum consequuntur accusantium, aperiam unde mollitia doloremque explicabo ea libero hic aliquam quisquam vel, optio molestiae dolor assumenda esse eligendi fuga illo fugiat? Sed ratione, veniam ullam molestias quo repellat rem. Perspiciatis illum quaerat neque eveniet, dicta error, velit omnis assumenda voluptatem iusto enim voluptatum eius incidunt cum nam quidem molestias blanditiis dolore beatae saepe ea. Rem maxime dolore doloremque vero beatae eos voluptatibus dignissimos, eligendi officia assumenda rerum laboriosam minima, neque autem nemo, alias molestias ipsa? Distinctio pariatur voluptatibus magni facere. Praesentium ex suscipit, hic quam debitis nulla possimus sed vitae commodi quo ipsum excepturi quidem, beatae, earum modi temporibus fugiat quisquam voluptas dolores! Deserunt ea reiciendis quae consequuntur perspiciatis tempora necessitatibus assumenda voluptas aperiam dignissimos, a nisi sapiente accusantium impedit facere distinctio quam laborum? Facere, facilis possimus. Blanditiis hic rem dolorem facere officiis adipisci, architecto, iste quod numquam nam aut saepe? At vitae cumque repudiandae quae rem quisquam possimus modi commodi illum! Minus assumenda quis cupiditate.
        </div>
      </div>
    </div>
  </body>
</html>