<h1>Red and blue boxes are slightly overlapped. Text is in the red box. Blue box has <code>mix-blend-mode:hue</code> <br><br>In Ex. B red box has <code>overflow:clip</code> <br>In Ex. C red box has <code>contain:paint</code></h1>
<section class="wrapper">
	<section>
		Ex. A
		<div class="box-sibling"></div>
		<div class="box">
			<span>This is a long text...</span>
		</div>
	</section>
	<section>
		Ex. B
		<div class="box-sibling"></div>
		<div class="box">
			<span>This is a long text...</span>
		</div>
	</section>
	<section>
		Ex. C
		<div class="box-sibling"></div>
		<div class="box">
			<span>This is a long text...</span>
		</div>
	</section>
</section>

section {
	div {
		width: 100px; 
		aspect-ratio: 1/1;
	}
	.box {
		background: red; 
	}	
	&:nth-of-type(2) .box{ 
		overflow: clip;
	}
	&:nth-of-type(3) .box{ 
		contain: paint;
	}
	.box-sibling {
		background: blue; 
		mix-blend-mode: hue;
		margin-bottom: -20px;
	}
	span {
		text-wrap: nowrap;
	}
}
.wrapper {
	width: 400px;
	display: flex;
	place-content: space-between;
}
h1 {
	width: 420px;
	--fsz: 18px;
	font-size: var(--fsz);
	font-weight: normal;
	text-align: center;
	code {
		font-size: calc(var(--fsz) - 2px);
		font-weight: bold;
	}
}

body {
	font-family: 'crimson text';
	height: 100vh;
	display: grid;
	row-gap: 30px;
	place-content: center;
	place-items: center;
	margin: 0;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}