OverFlow
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ovewrflow</title>
</head>
<body>
<div class="visible">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod velit
quisquam minima. Odio similique repellendus corporis accusamus dolorum
iusto quasi ullam libero quisquam voluptatem. Dolorem suscipit libero
ratione voluptas perferendis! Ipsa officia aliquid cum dignissimos nobis
fugiat nisi odio deleniti amet explicabo quidem, accusantium porro
voluptatibus sequi debitis nulla temporibus possimus! Adipisci similique
recusandae neque ut accusantium sed, explicabo totam. Libero omnis unde
minus eaque labore pariatur excepturi a inventore sint soluta officiis in
dicta beatae, quam ad corporis, dolore incidunt et accusamus. Inventore
earum ut dolores sunt rerum laboriosam? Hic, veniam recusandae, voluptatum
vero est quidem molestiae expedita porro ducimus distinctio deserunt saepe
ut ullam magni modi temporibus natus doloremque necessitatibus odio
dolorem mollitia quod nihil! Quam, velit dolorum. Dolore praesentium,
recusandae repellendus culpa distinctio pariatur voluptates quibusdam hic
nisi quam consequuntur illo ducimus ea officia ullam expedita? Nisi aut
voluptatem mollitia cupiditate ipsam numquam molestias doloremque
explicabo id?
</div>
<div class="hidden">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero,
doloremque voluptatem? Libero ullam officiis nisi distinctio voluptate,
deserunt quam. Tempora rerum earum, fugit atque neque cupiditate quasi
quisquam molestiae dolore! Omnis atque possimus eius, ducimus consequatur
harum dignissimos, sequi nam sapiente rem nesciunt, doloribus quidem
aperiam facilis iste iure laudantium distinctio totam? Fugiat excepturi
eos, et tempora architecto voluptatibus. Laboriosam! Temporibus neque
aliquam nobis quaerat modi commodi reiciendis, qui cumque excepturi
voluptatibus ad, est molestiae laborum dolorem? Architecto deserunt beatae
nihil nesciunt quasi, pariatur possimus quis sed alias, suscipit non.
Similique libero magnam nisi esse, quasi harum saepe quod dignissimos
reiciendis dolorem quos eaque debitis blanditiis veniam quas excepturi
corporis, natus iusto maxime cupiditate. Asperiores reiciendis dignissimos
facere deserunt dolorum! Esse ratione blanditiis tempore cum aliquid
consequatur amet, qui cupiditate dignissimos, aut pariatur quasi ducimus
praesentium quisquam, deleniti eveniet doloremque aperiam. Nam magni
temporibus et debitis. Deserunt possimus itaque esse?
</div>
<div class="scroll">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
blanditiis non corporis quas numquam. Repellendus, doloremque neque
accusamus quaerat distinctio modi at voluptates facere odit placeat
reprehenderit! Delectus, asperiores commodi. Ex ipsum eum eveniet non odio
odit voluptate dicta molestias nisi, vitae illum recusandae rerum maxime
numquam optio hic corrupti sequi, deserunt quia qui ea, aliquam a porro.
Necessitatibus, expedita. Sapiente laudantium blanditiis, at, perspiciatis
nisi a magni culpa aperiam vitae itaque ratione molestiae quia
repudiandae? Velit similique cum deserunt ipsam, delectus sit magni!
Consectetur minima distinctio quas est neque! Maxime ipsum quasi unde quae
corporis corrupti consectetur magnam similique doloribus officia possimus,
rem quam praesentium velit iure blanditiis molestiae officiis debitis
excepturi, ab aliquid voluptas fuga! Facere, reiciendis nulla! Tempora
consequuntur ratione reprehenderit. Deserunt quasi blanditiis corrupti
incidunt fugit quia nulla quis suscipit velit architecto! Illo
voluptatibus pariatur ipsa iste, id, non, autem dignissimos eaque hic
facere ad repellendus?
</div>
</body>
</html>
CSS
div{
background-color: black;
color: white;
height: 300px;
width: 300px;
border: 2px solid wheat;
}
.visible{
overflow: visible;
}
.hidden{
overflow: hidden;
}
.scroll{
overflow: scroll;
}
*************VISIBLE*****************
**************HIDDEN*****************
*********************SCROLL*********************
Comments
Post a Comment