To enable scrolling for a specific element, you can implement the following CSS setups: use overflow:hidden in the container and overflow:auto for the scrollable content as advised by @satyr.
If you want to make a scrollable element within a non-scrollable full page layout, adjust your html and body styles to cover the whole page, suggested by @cs.matyi.
For a more complex layout with fixed and scrollable elements, combine both techniques like this:
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html,
body {
height: 100%;
margin: 0;
}
.flexvertical {
display: flex;
flex-direction: column;
}
.flexhorizontal {
display: flex;
flex-direction: row;
}
.space-between {
justify-content: space-between;
}
.align-center {
align-items: center;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-auto {
overflow: auto;
}
.padding {
padding: 1rem;
}
.reverse {
color: white;
background-color: black;
}
</style>
</head>
<body class="flexvertical">
<header class="flexhorizontal space-between align-center reverse padding">
<img src="https://imageholdr.com/220x60/transparent/84c286?text=layout&font-size=32&font-family=stiljaFree">
<h1>Layout test</h1>
<nav><a href="/">Home</a> | <a href="#">Things</a> | <a href="#">Stranger things</a> | <a href="#">Other things</a>
</nav>
</header>
<main class="flexvertical overflow-hidden">
<h1 class="padding">Page Heading</h1>
<article class="padding overflow-auto">
<h2>Article heading</h2>
<p>Scrollable Article content</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod aspernatur, non nesciunt recusandae, temporibus consectetur harum ullam provident iste laboriosam porro nulla est necessitatibus placeat cum unde ut architecto.</p>
...
</article>
</main>
<footer class="reverse padding">
Copyright © 2023. All Rights Reserved.
</footer>
</body>
</html>