overflow：要素からはみ出した内容の表示方法を指定する

/* キーワード値 */
overflow: visible;
overflow: auto;
overflow: clip;
overflow: hidden;
overflow: scroll;

/* 水平方向 | 垂直方向 */
overflow: hidden scroll;

/* グローバル値 */
overflow: inherit;
overflow: initial;
overflow: revert;
overflow: unset;

<section class="samp_box">
	<div id="of_1">
		<h2>overflow: visible;</h2>
		<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
		<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
	</div>
	<div id="of_2">
		<h2>overflow: hidden;</h2>
		<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
		<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
	</div>
	<div id="of_3">
		<h2>overflow: scroll;</h2>
		<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
		<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
	</div>
</section>

.samp_box {
	overflow: auto;
	padding: 0 1rem 5rem;
	background-color: #eee;
	display: grid;
	grid-template: 150px / 1fr 1fr 1fr;
	gap: 1rem;
	resize: horizontal;
}
.samp_box div {
	margin: 1rem 0 0;
	padding: .5rem;
	border: 1px solid #999;
	background-color: #fff;
}
div h2 {
	margin: 0;
	font-size: 1rem;
}
div p {
	margin: .5rem 0 0;
}
#of_1 {
	overflow: visible;
}
#of_2 {
	overflow: hidden;
}
#of_3 {
	overflow: scroll;
}