flip card with scrollbox

<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body {
position: relative;
width: 100%;
}
.links {
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0;
font-size:170%;
font-weight:bold;
color: #000;
font-family: 'Balsamiq Sans', cursive;
text-decoration:none;

}
.flip-card {
background-color: transparent;
width: 400px;
height: 450px;
perspective: 1000px;
border-radius:9px;

}

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
border: #000 double;
border-radius:9px;
}

.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius:9px;
}

.flip-card-front {
background-color: #bbb;
color: black;
}

.flip-card-back {
background-color: #000;

color: white;
transform: rotateY(180deg);
border-radius:6px;
}

#textsa {


overflow: scroll;
height: 400px;
width: 95%;
padding: 10px;
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0;
font-size:170%;
font-weight:bold;
color: #000;
font-family: 'Balsamiq Sans', cursive;

}
</style>
</head>
<body>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://pbs.twimg.com/media/E0T9fO9VkAQ1LNx?format=jpg&name=large" alt="Avatar" style="width:100%;height:100%;border-radius:6px;">
</div>
<div class="flip-card-back">


<div id="textsa">

<div align="left">
text text text text text text text ss text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

</div>
</div>


</div>
</div>
</div>

</body>
</html>
<p>play around with the "flip-card" part for the width and height of the card!</p>