Position Scrollable Container to the bottom of its parent Container - CSS

JohnDole
April 7, 2023
157 views
1 vote
2 Answers

Blue Component:

height: "95.4vh",
backgroundColor: "#f0f0f0",
overflow: "auto",

Orange Component:

display: "flex",
justifyContent: "center",
marginRight: "17px",
marginLeft: "17px",

Green Component

 marginTop: "16px",
 marginBottom: "78px",

How can I position the orange Component to the Bottom and let it grow to the top if my items in the green will be added? ChatGPT gave me solutions with display flex, but after that the scrolling was not possible anymore.

Edit: Here is an working example. As you can see, when you resize the blue container, the orange sticks on the top. But I want it to stick on the bottom and grow to top. https://jsfiddle.net/ex9dwks3/

Tags: css

Answers

try this

.container{
  height: 200vh;
}

.blue {
    height: 95.4vh;
    width: 100%;
    background-color: blue;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding :2rem; /* just for styling */
}

.orange {
    width: 60%;
    max-height: calc( 100% - 4rem );
    padding :2rem; /* just for styling */
    background-color: orange;
}

.green {
    display: flex;
    justify-content: center;
    max-height: 100%;
    overflow: scroll;
    background-color: green;
}

<div class="container">
<div class="blue">
  <div class="orange">
    <div class="green">
      <ul>
        <li>text 1</li>
        <li>text 2</li>
        <li>text 3</li>
        <li>text 4</li>
        <li>text 5</li>
        <li>text 6</li>
        <li>text 7</li>
        <li>text 8</li>
        <li>text 9</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
        <li>text 10</li>
      <ul>
    </div>
  </div>
</div>
</div>

I wrote something like below . I hope it works for you.

.blue {
width:100%;
height:250%;
background-color: blue;
min-height: auto;
display: flex;
justify-content: center;
position:absolute;

}
.orange {
width:50% ;
height: 220vh;
position: absolute;
background-color: orange;
display: flex;
align-items: center;
justify-content: center;
bottom:0px;

}

.green{
width: 60%;
height: 60%;
background-color: green;
justify-content: center;
display: flex;
position: absolute;
overflow-y: auto;
top:15%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style.css">
    <title>Document</title>
</head>
<body>
    <div class="blue">
        <div class="orange">
            <div class="green">
       
       Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est doloribus ab ducimus tenetur atque possimus repellat quia dolorem quo labore, in ipsa nesciunt, neque iusto voluptate nostrum alias deserunt maxime.
       Veniam impedit, maiores ipsam totam vel neque sed officiis? Necessitatibus animi consequuntur numquam, fugit quaerat, consectetur delectus cupiditate dolor molestias, repellat dolores mollitia! Quidem magnam delectus ipsa, impedit aperiam repudiandae?
       Quibusdam id nostrum, non molestias corrupti quos tempore rerum alias aperiam? Labore, illum aliquam quibusdam quae alias, harum excepturi optio deserunt rem hic dicta nihil? Vitae doloremque molestiae rerum ducimus.
       Est alias explicabo illo, officia eius totam officiis neque, id qui, recusandae eum error necessitatibus asperiores sequi quaerat veniam fugit voluptatem nobis natus consequatur aperiam. Magnam sapiente explicabo voluptatum facilis!
       Blanditiis consectetur quaerat distinctio repellendus velit ducimus aperiam possimus reprehenderit doloremque repudiandae culpa recusandae iure fugit, exercitationem odit voluptatem in modi consequuntur delectus fuga architecto. Exercitationem enim quas non corporis?
       Maiores, quia? Officiis nihil ipsa reiciendis, aperiam, omnis, fuga inventore ratione non distinctio illum quo assumenda iusto nobis natus repudiandae. Accusantium dolorem recusandae quam obcaecati suscipit quo doloremque odio dolores!
       Ab deleniti tempora ipsum dolorem vel veniam cumque, quo, pariatur unde aspernatur dicta est commodi quos placeat, rem ducimus suscipit magnam! Magni esse exercitationem quibusdam soluta nulla nisi, ad inventore?
       Accusamus voluptatibus aliquid ducimus ullam maxime, earum molestias aliquam quam, officia exercitationem repellendus in sint facere non architecto numquam dolorum necessitatibus nobis cupiditate. Aperiam, accusamus! Eos qui aspernatur odio. Tempore.
       Laborum quidem eaque exercitationem culpa eum dolorem tempore corporis tempora optio impedit ipsa qui vero perspiciatis dolorum temporibus repellat ab quis architecto, officia voluptate consectetur? Labore magni fugiat quasi tenetur?
       Itaque provident dolor aut et numquam nobis vero dolore maiores optio delectus distinctio, aperiam voluptatibus est rem nostrum, quisquam excepturi autem sit eaque voluptatem consequatur velit aspernatur. Repudiandae, rerum perferendis?
       
       Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea fugiat ratione dolor itaque maiores alias dolorum quisquam enim ab eum. Quod quaerat facilis necessitatibus veritatis id dicta repudiandae, ipsa laboriosam.
       Atque error inventore dolorem, facilis officia amet vel qui libero in laborum cupiditate autem consectetur quae molestias officiis reprehenderit animi? Adipisci reprehenderit nihil nesciunt et dignissimos alias vel natus laudantium.
       Illum error ad quos, repellat ipsam unde, laboriosam, voluptatem cum sunt nesciunt numquam ipsa! Commodi veritatis sequi dolore assumenda nulla facilis aspernatur vero, blanditiis dolor ea, veniam voluptatibus ratione neque.
       In architecto corporis repellendus dolore id magnam optio pariatur quaerat recusandae tempora aliquid, quibusdam exercitationem, atque repudiandae. Nam expedita modi dolorem quasi fugiat dolor dicta officia hic, provident, dignissimos similique.
       Maxime quis soluta doloremque praesentium repellendus officia, temporibus error non facilis obcaecati fugit totam aliquam exercitationem sed impedit laboriosam, sit omnis eveniet perspiciatis facere odio, saepe necessitatibus aspernatur? Praesentium, tenetur.
       Debitis praesentium quo ab. Odio cumque nesciunt, ad iste inventore, vel sed maxime doloremque eaque, accusamus dolorum tenetur iure molestiae quod nihil nulla illum esse. Nihil id ad minus amet.
       In officia velit pariatur facere! Eum quia, magnam quisquam cumque explicabo fugit adipisci, harum praesentium, quaerat saepe fuga. Ut, nobis eveniet? Quas optio eos amet iusto, veniam suscipit eveniet sequi?
       Maiores exercitationem nesciunt obcaecati! Quo, nam quam fuga labore eum quibusdam suscipit architecto ad iure recusandae id. Natus accusantium consectetur perferendis, distinctio porro nihil vero quibusdam est delectus esse itaque?
       Eius totam ex nobis eveniet. Odit quae nesciunt quidem alias eum ut rem officiis repellat quibusdam, dolores totam accusantium, ab illum dignissimos laudantium incidunt reprehenderit est fuga doloribus. Repellendus, fugiat?
       Veniam eum libero nemo est cupiditate doloremque quibusdam obcaecati explicabo, dolorum tempora quod expedita cumque sint facere. Autem consectetur, debitis ullam, quisquam architecto accusamus praesentium eius possimus omnis minus maiores.

       Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam exercitationem qui necessitatibus, cumque sequi. Minus, repellat molestias error voluptatum laborum quas omnis itaque beatae. Fugit eos sequi reiciendis atque!
       Nisi consequatur reiciendis consequuntur numquam vel sed quod odit quia eveniet et quae inventore minus, alias accusamus ratione sapiente beatae. Eligendi id soluta, nobis ea alias quae consectetur quod modi.
       Reprehenderit aliquam natus minima nostrum quis officia, animi minus distinctio optio omnis blanditiis! Fugiat ipsum tempore nam hic laborum a quos, ad vel magni odit, saepe necessitatibus error modi molestias.
       Doloremque veniam, amet porro neque dolore sequi minima perferendis ea ipsum eligendi sit ab adipisci cum exercitationem dolorum doloribus quae, excepturi vel nihil cumque ipsa hic! Ullam nobis modi aspernatur.
       At, hic architecto veniam ea delectus incidunt itaque blanditiis veritatis! Delectus iure aliquam asperiores molestias sequi voluptas quis nihil voluptatum reiciendis consequatur unde deleniti qui accusantium odio excepturi, praesentium fugit!
       Animi aliquid quis aliquam minus ullam obcaecati sequi adipisci asperiores sapiente earum perspiciatis accusantium, maiores iure. Reiciendis unde quos velit error? Ipsum accusantium quia quasi labore, ipsa eaque vitae soluta.
       Placeat quam consequatur repellendus doloremque sequi voluptates neque, unde atque voluptas perspiciatis quas ex nemo recusandae possimus, modi qui asperiores voluptatum, ut pariatur amet. Debitis commodi cupiditate obcaecati enim quo?
       Delectus fuga assumenda voluptatem consequuntur ducimus, laboriosam, excepturi iure magni, ex odit ipsa. Neque alias doloribus harum, voluptatum omnis vel blanditiis quis natus veniam aliquid ipsam, sequi earum ullam cumque.
       Exercitationem unde placeat numquam nostrum iste dicta, tempore incidunt cum consequuntur adipisci provident voluptatem! Minima earum dolore provident totam, ipsam delectus quod vel! Mollitia nostrum, assumenda omnis officiis similique autem.
       Laudantium eligendi, eius rerum nam ipsam eaque aliquid est quas delectus facilis veniam repellendus, eum rem. Eveniet commodi atque in ex animi veritatis, veniam suscipit, nihil illo perferendis, quos quasi.
       Perferendis dolore quo deserunt ducimus aperiam dolorem deleniti eum voluptatum voluptates rem explicabo harum, labore aliquam repellendus maiores, distinctio modi debitis ut, accusamus impedit nesciunt? Laborum voluptas quo blanditiis? Culpa!
       Quod architecto expedita eaque rem? Id, exercitationem reprehenderit fugit doloribus minus cumque. Excepturi at odio ducimus atque voluptatem iusto nostrum, esse aliquam quas animi eaque alias dolorum perspiciatis officia vero.
       Culpa beatae eaque est numquam animi! Delectus asperiores ut ab soluta aperiam enim porro voluptatum, nemo rerum numquam nisi, aspernatur, architecto accusantium autem omnis quos illum ex veniam? Atque, obcaecati.
       Exercitationem porro placeat asperiores corporis impedit eum eos fugiat veritatis vero alias nesciunt tenetur consequuntur ullam sunt minima velit, quia voluptatem facilis cupiditate harum eaque facere quis hic odit. Nam.
       Voluptatibus sunt hic numquam reprehenderit possimus, nostrum dolorem esse. Perspiciatis nesciunt possimus aliquid iusto rem eius voluptatum, magni nulla similique! Sunt eos distinctio dolorum voluptatum earum mollitia ipsam libero nulla!
       Illo obcaecati praesentium cum, possimus rem doloribus harum aliquam nobis. Commodi, consectetur pariatur? Optio nesciunt repellendus excepturi mollitia aut doloremque, quas tenetur quisquam. Aliquam aliquid laudantium distinctio animi labore culpa!
       Voluptatem harum in voluptas, nesciunt, dolorum ipsum, modi doloribus enim tempora vel rerum similique beatae reprehenderit iste nulla assumenda. Libero incidunt explicabo reprehenderit dicta totam dolorum placeat nisi, ratione nobis.
       Adipisci magni vero, maxime minus illo tenetur excepturi fuga exercitationem, corporis repellendus deserunt quasi itaque. Dolorum assumenda commodi dolorem, expedita nemo deserunt praesentium suscipit harum aliquid nesciunt, molestiae sunt alias?
       Distinctio, cumque dolor optio nam quas cupiditate, aspernatur iure ad nobis iusto nostrum. Accusantium iste consequatur autem quod, at perferendis nesciunt neque dolor necessitatibus, obcaecati pariatur? Exercitationem quod tempora iste!
       Temporibus, accusantium repudiandae aliquam totam consectetur repellat cum minus deserunt officiis molestias. Quia aspernatur dolor doloribus inventore saepe totam quos, fuga dolore consequuntur tenetur ea tempore porro modi dicta corrupti!
       Distinctio pariatur veniam doloribus itaque accusamus, consectetur animi ea placeat culpa quasi. Numquam, sit debitis, neque facere hic reprehenderit dolorum, repudiandae nobis ullam aspernatur itaque inventore recusandae et quod obcaecati.
       Dolor voluptatibus eaque maiores consectetur reiciendis blanditiis, sit vitae necessitatibus nesciunt tempora repudiandae laudantium iusto deserunt explicabo. Quia deserunt aspernatur, et quaerat voluptatibus consequuntur sequi ratione, praesentium minima tempore nesciunt.
       Facere doloremque eveniet quos voluptas. Sed, consequuntur, ab rem delectus animi quis dolore ut tempora excepturi quidem architecto omnis neque modi in odio aliquid rerum vero repellat beatae voluptatem nam.
       Eaque rem illo magnam iste corporis voluptates expedita officia cumque veritatis maxime! Doloremque, id vel eos adipisci provident animi dolore voluptates porro inventore laborum culpa dolorem, expedita, atque iure eligendi.
       Porro quidem reiciendis quos soluta illum mollitia dolorum esse aliquid quo nihil sint doloremque, eum blanditiis ducimus debitis velit suscipit aspernatur repellendus. Quo adipisci tenetur similique enim ipsa suscipit dolores!
       Officiis nostrum alias reprehenderit voluptates reiciendis corporis similique, quae consequatur a modi nulla nam harum ex corrupti eum quos quaerat rerum, sunt inventore sit nihil neque. Animi, qui veritatis. Id!
       Pariatur, quidem laborum necessitatibus consequatur quos ad fugiat, cumque voluptates excepturi suscipit laboriosam ipsum sint repellendus, ipsa recusandae culpa molestiae perferendis dolorem accusamus dolores velit odio fuga officiis voluptate. Numquam!
       Culpa veritatis sit quod libero magni. Ut, saepe iste dolores voluptate repellendus, sed accusantium aut laboriosam officiis iure officia at expedita. Similique labore impedit nostrum aliquid dolor obcaecati quibusdam exercitationem.
       Distinctio voluptas, obcaecati necessitatibus eveniet autem dolore aliquam aspernatur, esse nulla saepe minus architecto dicta. Officiis optio dicta perferendis voluptatum illo, fugiat cumque, at veniam voluptatibus, illum ea quam deserunt?
       Maiores voluptates ratione quae aliquid hic ipsum exercitationem praesentium incidunt quidem laudantium deleniti voluptatem enim asperiores placeat, ducimus blanditiis similique ab quis itaque. Magnam aspernatur, perspiciatis magni impedit tempora ducimus.
       Veritatis dignissimos qui ut tempora non, accusantium laboriosam sed possimus cupiditate! Magnam repudiandae sunt perferendis optio provident illo voluptatum asperiores repellendus, reprehenderit, blanditiis illum quod obcaecati iusto, praesentium doloremque excepturi.
       Culpa dolore delectus voluptas ut assumenda laborum maxime dolores, ratione atque est, sit deleniti magnam beatae autem saepe fugiat, similique distinctio. Aspernatur, placeat maxime veritatis ab corrupti quia vero! Voluptatibus.
       Officia sed soluta, numquam necessitatibus incidunt non perferendis explicabo quibusdam natus perspiciatis nulla neque odio qui aut libero et inventore eos aperiam dolorem suscipit error deserunt. Consequuntur exercitationem ipsum expedita?
       Mollitia ad in, rem aliquid deleniti ex eius aperiam nisi libero reiciendis quia labore quos unde ipsa aspernatur et fugiat dolor velit voluptatibus est repellat. Provident perferendis tenetur aut repellendus.
       Dolores magni rem asperiores veritatis, doloremque omnis repudiandae amet. Ab tempore natus sint reiciendis illo, quia maiores assumenda dolore delectus exercitationem, consectetur vel repellat fugiat iusto error velit. Voluptate, repellat?
       Ipsa dolores harum nemo nisi sequi deserunt vitae mollitia hic doloremque. Inventore, magnam sequi quam minus natus, autem nostrum porro ut eligendi repellat architecto commodi nesciunt necessitatibus, obcaecati voluptates ipsa?
       Enim id assumenda consequuntur maxime amet corrupti quibusdam aut incidunt dolor quia animi nulla blanditiis, architecto eum minus voluptates. Nulla quam impedit optio error perspiciatis facilis placeat omnis quos dolor.
       Cupiditate laboriosam harum voluptates sunt tempora voluptatibus sequi quae voluptas sit distinctio sint sapiente, iure quibusdam in! Iusto architecto sapiente modi enim ex labore, necessitatibus, odit quos quidem praesentium autem.
       Nihil, voluptatum obcaecati. Minus, blanditiis laboriosam? Cum distinctio ad amet? Nam fuga ducimus enim unde id culpa quos doloribus, quisquam neque inventore nemo amet, doloremque, laborum quae et non minima?
       Rerum laboriosam officia iusto nesciunt. Quaerat non fuga eum placeat dolore voluptas quae doloribus, cumque voluptatibus nemo! Dolores minus incidunt quasi fuga aspernatur cupiditate pariatur veniam rerum exercitationem, perspiciatis necessitatibus.
       Beatae dolor totam molestias sapiente quis similique atque explicabo nihil pariatur ea hic dolores dicta obcaecati, velit sed rerum autem suscipit magni? Aperiam rem officia qui quod quidem dignissimos obcaecati?
       Mollitia iure iusto temporibus dolore cum quasi dolorum veritatis? Quos saepe corporis quam vitae laudantium sit dolore, animi eum porro et repudiandae pariatur explicabo consequuntur iure deserunt sunt, alias accusamus!
       Numquam nihil facere itaque doloribus, earum inventore, vero atque enim expedita, ullam ea possimus sequi fugit! Quo repudiandae incidunt, ad iste, iusto quasi, quisquam aliquid nobis blanditiis molestias sed provident.
       Voluptate tempora ex eaque fuga, perspiciatis velit ipsa minus sit, voluptates, omnis non. Error voluptatem asperiores recusandae minus quos deleniti ut consequatur similique expedita? Eaque eveniet iste libero natus nobis!
       Temporibus id incidunt vitae eligendi, odio quam qui neque nisi deserunt placeat laborum aliquam laudantium dolorem animi ut vel! Cum illum commodi ratione expedita soluta totam fugiat saepe exercitationem sint.
       Nesciunt quia voluptas quisquam corporis numquam sapiente, repellendus dolore. Obcaecati nisi aut consequatur illum eos natus fugit voluptatum? Fugit repellendus quasi enim sequi aspernatur ex dignissimos modi voluptas unde exercitationem!
       Dolore nisi nobis aliquid vel? Beatae quos impedit corporis veniam ipsum mollitia et molestias vero velit consectetur! Animi, accusantium reiciendis fugit tenetur adipisci consequuntur. Fuga ratione repellendus rerum illo ab?
       Aperiam iusto quaerat commodi sint laboriosam architecto dignissimos cum eius suscipit facilis, laborum fuga nulla! Voluptate et incidunt facilis blanditiis? Eum sed deleniti fuga illo excepturi in dicta iste esse!
       Ipsa repudiandae totam eos magni iure sit voluptas ipsum vero eum, eveniet dolore quibusdam incidunt facere consectetur blanditiis qui provident maiores nemo dolorem architecto a similique dolores consequuntur? Consequatur, error.
       Et similique totam ut beatae labore amet sit explicabo blanditiis distinctio, modi earum ea soluta nihil quibusdam quo porro accusantium nobis molestiae veniam voluptates aut! Molestias quis incidunt quisquam alias.
       
       
       </div>
       
       
       </div>
    </div>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Position Scrollable Container to the bottom of its parent Container – CSS

Answers