<h1>An example of CSS Layout Containment <br><br>Both boxes have a fixed positioned descendant (in green)<br>Box B has <code>contain:layout</code></h1>
<section>
	<div class="box">
		<p>Box A</p>
		<div class="fixed-element">Fixed A</div>
	</div>
	<div class="box">
		<p>Box B</p>
		<div class="fixed-element">Fixed B</div>
	</div>
</section>

.box {
	width: 100px;
	aspect-ratio: 1/1;
	border: 2px grey dashed;
	.fixed-element {
		border-radius: 4px;
		background: lime;
		width: 100px;
		aspect-ratio: 2/1;
		position: fixed;
		left: 0px;
		bottom: 0px;
		text-align: center;
		line-height: 50px;
	}
	&:nth-of-type(1) { 
		float: left; 
	}
	&:nth-of-type(2) { 
		float: right; 
		contain: layout; 
	}
	p {
		text-indent: 10px;
	}
}
h1 {
	--fsz: 18px;
	width: 420px;
	font-size: var(--fsz);
	font-weight: normal;
	text-align: center;
	code {
		font-size: calc(var(--fsz) - 2px);
		font-weight: bold;
	}
}
section {
	width: 400px;
}
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;
}