<!doctype html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="/assets/reset.css" rel="stylesheet">
		<link href="style.css" rel="stylesheet">
	</head>
	<body>
		<section>
			<h2>A heading</h2>
			<p>This is a paragraph, so we have some text to overflow our container. Another sentence, another line. It’s probably nearly long enough now, but I’m just getting in the groove of typing it out here so let’s keep going longer. Let’s have a little bit more here, for good measure. Just for one more line!</p>
		</section>
		<section>
			<h2>A heading</h2>
			<p>This is a paragraph, so we have some text to overflow our container. Another sentence, another line. It’s probably nearly long enough now, but I’m just getting in the groove of typing it out here so let’s keep going longer. Let’s have a little bit more here, for good measure. Just for one more line!</p>
		</section>
		<section>
			<h2>A heading</h2>
			<p>This is a paragraph, so we have some text to overflow our container. Another sentence, another line. It’s probably nearly long enough now, but I’m just getting in the groove of typing it out here so let’s keep going longer. Let’s have a little bit more here, for good measure. Just for one more line!</p>
		</section>
		<section>
			<h2>A heading</h2>
			<p>This is a paragraph, so we have some text to overflow our container. Another sentence, another line. It’s probably nearly long enough now, but I’m just getting in the groove of typing it out here so let’s keep going longer. Let’s have a little bit more here, for good measure. Just for one more line!</p>
		</section>
		<section>
			<h2>A heading</h2>
			<p>This is a paragraph, so we have some text to overflow our container. Another sentence, another line. It’s probably nearly long enough now, but I’m just getting in the groove of typing it out here so let’s keep going longer. Let’s have a little bit more here, for good measure. Just for one more line!</p>
		</section>
	</body>
</html>
index.html
			body {
	--base: 20px;

	display: grid;
	font-family: 'Helvetica', sans-serif;
	gap: var(--base);
	padding: var(--base);
}

section {
	background-color: gold;
	padding: calc(var(--base) / 2);
}

h2 { font-size: calc(var(--base) * 3); }

/* Limit the height. */
section:not(:first-child) { height: calc(var(--base) * 7); }

section:nth-child(2) { overflow: visible; } /* Default. */

section:nth-child(3) { overflow: hidden; } /* “Crop” contents. */

section:nth-child(4) {
	overflow-x: hidden;
	overflow-y: auto; /* Scroll vertically! */
}

section:nth-child(5) {
	display: flex; /* Horizontal layout. */
	gap: var(--base);
	overflow-x: auto; /* Scroll horizontally! */
	overflow-y: hidden;
}

section:nth-child(5) * {
	flex-shrink: 0; /* Don’t shrink! */
	width: 90%; /* Always peek the next block. */
}
style.css