JSFiddle - React, Tailwind, and code Playground

by id0

HTML

<div class="wrapper"> 
		<div class="section">
				<div class="content">
					Content
					<div class="not-hidden">
						I'm out of the border and still visible
					</div>
					<div class="out-of-border">
						I'm hidden (400X100)
					</div>
				</div>
		</div>
	</div>

CSS

.wrapper {
			position: relative;
			width: 100%;
			height: 100%;
		}
		
		.section {
			border: 3px solid black;
			position: relative;
			height: 100px;
			width: 500px;
			margin: 0 auto;
			margin-top: 50px;
			transform: translate(0, 0);
		}
		
		.content {
			overflow-y: auto;
      height: 100px;
			font-size:30px;
		}
		
		.not-hidden {
			position: absolute;
			right: -40px;
			top: -40px;
			font-size:30px;
			background-color: yellow;
		}
		
		.out-of-border {
			margin-left: 200px;
			width: 400px;
			height: 100px;
			background-color: red;
		}