JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/Orange-OpenSource/Orange-Boosted-Bootstrap/v4.0.1/dist/js/boosted.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
	<style media="screen" type="text/css">

	.test-external {
		height: 50vh;
		width: 400px;
		background-color: #f16e00;
		overflow: auto;
	}

	.test-internal {
		margin: 0 auto;
		height: 150vh;
		width: 300px;
		background-color: #4BB4E6;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}
	
	.test-bottom-div {
		background-color: #32c832;
	}

	</style>

    <title>Test .sr-only</title>
  </head>
  <body>
    <div class="test-external">
		  <h3>
			  Test without fix
		  </h3>
		  <div class="test-internal">
			  <div class="test-bottom-div">
				  <span class="sr-only">Text for screen reader</span>
				  <span aria-hidden="true">Text for standard screen</span>
        </div>
		</div>
	  </div>


  </body>
</html>

CSS

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  border: 0;
}