How to make a div individually scrollable in React Bootstrap - css

Question

So im currently trying to use React Bootstrap for my website. I'm confused how to make only one div to be scrollable and the others not. Here's my code in App.js
import * as React from 'react'
import Container from 'react-bootstrap/Container'
import Button from 'react-bootstrap/Button'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
function App() {
return (
<Container fluid>
<Row style={{height: "100vh"}}>
<Col sm={4} className="border border-primary">
<div>Avatar</div>
</Col>
<Col className="border border-primary">
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>
<div className="position-sticky">
stick please
</div>
</Col>
</Row>
</Container>
);
}
export default App
In the image, the <div>please stick</div> is not seen because it's far below and the <Col>avatar</Col> is scrollable when I wanted to make the text Avatar to stick.
Does anyone know how to make one div scroll independently while the other divs stays and cannot be scrolled? Thanks in advance

Answer 1

Give the scrollable div overflow-y: auto. One child of a container won't scroll until you give the height to its parent. In the following example, I've given height: 100%, because I want to divide the page into 2 parts which will take full height i.e (100vh). You can also give custom height i.e height: 300px;
Just add height on parent cotainer and overflow-y: auto to child element that you want to scroll.
body,
html {
height: 100%;
margin: 0;
}
div.container {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
}
div.first {
background-color: burlywood;
padding: 1rem;
}
div.second {
background-color: darkcyan;
padding: 1rem;
overflow-y: auto;
}
<div class="container">
<div class="first">
first
</div>
<div class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut totam nulla quae accusantium sunt provident saepe, quis fugit delectus? Possimus sed id dolore omnis facere harum vitae dolor reprehenderit. Tenetur. Ipsa quasi rem deleniti quidem ut corporis
s officia minima est labore dignissimos quia exercitationem unde! Libero deleniti in laudantium harum nihil reiciendis autem dolorum vero, non blanditiis sapiente quibusdam tenetur animi, dicta laboriosam quisquam sint repellat natus eius nostrum
reprehenderit. Veniam recusandae quod quaerat quis. Cumque eum ducimus, at deserunt nemo minus neque similique dolores rerum voluptas, necessitatibus quis aperiam consequuntur, error quo accusamus. Cum doloremque ut deserunt. Cupiditate, possimus
delectus. Dignissimos minima perspiciatis fugiat. Minima quaerat laborum veniam reprehenderit, ea reiciendis expedita explicabo nemo, recusandae harum, dolores vitae tenetur dolore itaque ducimus odit deserunt pariatur dolor facere molestiae unde
quos et. Ut, consectetur neque! Debitis dicta doloremque eaque ex aspernatur odit saepe omnis dignissimos veritatis ut. Earum dolores mollitia dolorem eligendi ad molestiae, saepe exercitationem harum magni doloribus, natus minima ratione aliquam
laudantium expedita! Nam odit harum consequuntur eaque quas, magni atque tenetur veniam dolor ipsum fuga sapiente vero molestias at consectetur ratione! Ex obcaecati nihil sed eum dicta impedit asperiores dolorum reiciendis vitae! Velit, qui esse
quos eveniet voluptas quia ipsum minus asperiores. Quas, deserunt hic nihil quam eligendi, voluptatem dolores ducimus nesciunt enim saepe officia eos quia blanditiis esse neque omnis aliquam! Ab quod harum maxime illum quam commodi cupiditate eaque,
esse vero nostrum, deleniti ut eum recusandae. Quos asperiores distinctio a debitis? Expedita illum minus modi facere reprehenderit animi, voluptate ipsum? Quis vel, voluptatem veniam, accusamus pariatur delectus aliquam voluptatum quisquam voluptatibus
odio earum itaque praesentium! Voluptate voluptatem expedita reiciendis pariatur aspernatur accusamus ut nihil! Cum id veniam repellendus. Sed, corrupti. Quam laborum corporis, ipsum iste ex, quas est nihil ipsa architecto tenetur, exercitationem
qui commodi repellat. Laboriosam sit nesciunt, quidem ipsum, similique vero optio vel aperiam nemo deleniti quas voluptas? Inventore nesciunt facere consequatur tempora ad ullam sint, commodi voluptate rem temporibus repellat aut dolores accusamus,
tenetur deleniti non quam necessitatibus praesentium fugiat harum iusto eveniet? Hic suscipit corrupti libero. Ipsa dignissimos optio et eveniet nulla itaque assumenda, voluptate a nostrum quisquam consectetur eum eaque magnam nobis provident, distinctio
omnis unde eius ipsam at labore enim iusto accusantium. Beatae, ut. Odio fugit atque, ad nobis incidunt tempora vitae ullam sapiente perferendis non quas aut eos animi minus optio aspernatur voluptates debitis! Nisi, sed a exercitationem ea iure ipsa
iste accusantium. Porro, distinctio voluptatem sequi qui dolore quidem quia odio optio ullam soluta adipisci perferendis, illum reiciendis temporibus quis atque quibusdam possimus laboriosam quae id consequuntur tempore! Ipsum excepturi sapiente iure!
Modi atque provident aut accusamus est, blanditiis architecto, nulla quis quibusdam, hic nobis eligendi explicabo dolorum voluptatem beatae voluptatum sunt repellendus quam! Suscipit eum cupiditate tempore illum sed modi expedita! Eos quas dolorum
id, consectetur recusandae aliquam error nisi labore autem ullam inventore deserunt consequuntur nihil dolore tenetur sit soluta tempore quod quis doloribus sequi! Accusamus repudiandae est possimus facilis! Ab error a, culpa eaque inventore sit amet
dolorum rem, quae omnis aperiam aut nesciunt voluptas ullam dolore reprehenderit ratione et enim magnam eveniet sint iste ipsam deserunt excepturi. Ratione. Harum corporis sunt autem aperiam provident pariatur dolore eveniet consequatur repellendus
voluptate ipsa impedit, numquam illo doloremque velit excepturi quo saepe. Obcaecati, dolore neque quas eum nisi at ducimus recusandae! Debitis rerum a sapiente numquam aut doloremque cum nemo eaque, incidunt at recusandae repellat odit aspernatur
nesciunt obcaecati non velit cumque blanditiis omnis facere vero quis eos ab? Magnam, earum. Iusto voluptates repellendus facere possimus porro ducimus dicta illo, repellat ab. Iste, at obcaecati quis, fuga accusantium molestias consectetur, nobis
praesentium recusandae deleniti ut veniam. Optio debitis labore odit doloremque. Adipisci ullam repellat provident culpa ab molestias autem voluptates tempore aspernatur delectus obcaecati, corrupti nesciunt aperiam? Perspiciatis, est doloribus quam
non hic minus at laudantium unde enim voluptates sapiente officia. Aut, fugit libero, voluptatem eum ipsum consectetur vitae dolores optio modi soluta reiciendis! Sunt eum explicabo reprehenderit iure ut ab. Corrupti eligendi fugit rem sunt libero
aperiam veritatis accusamus nesciunt! Doloremque praesentium eaque nulla itaque autem eum modi maiores, nobis aperiam odio ipsam dolorem optio est nesciunt dolores, sequi beatae corrupti voluptate fuga voluptatem nemo, error ullam debitis? Incidunt,
adipisci. Vitae enim, accusantium autem aspernatur voluptatum ullam aliquam eum reprehenderit repellat hic voluptatem porro quos sunt cumque quisquam incidunt sint blanditiis sapiente odio! Eius nostrum cumque, impedit omnis saepe rem. At excepturi
enim nihil quia laudantium architecto, velit blanditiis mollitia saepe repellat iste natus ipsam! Dolor repellat illo atque ut ducimus impedit similique porro. Delectus sed nihil voluptas ducimus perspiciatis. Ex cupiditate ipsum minima veritatis
recusandae? Soluta porro magnam itaque beatae quis! Facere nesciunt dicta minus blanditiis tempora cum, nisi, a asperiores quis recusandae dolor illum non sint vero hic?</div>
</div>