We Keep Coding

How to create multiple row with two columns in React app

Well, in my react app, I want multiple rows having two columns. Just like first pink picture below.
But I am getting it like this. The divs are floating on the left side only, and nothing is working.
I think there should be a solution for using in map method. react component code.
{dog.map((data) => (
<div key={data.id} className="dogs-list">
<div id={data.id} className="first-column">
<img src={dogPic} alt="dog"></img>
<h3>Dog's Name</h3>
<h3>{data.name}</h3>
</div>
</div>
))}
Nothing is working. Can anyone please help?
this is the styling of this area.
.page .dogs-list {
/* display: flex; */
color: white;
width: 100%;
}
.page .dogs-list .first-column {
width: 50%;
/* border: 2px yellow solid; */
/* display: flex;
flex-direction: column; */
float: right;
}
.dogs-list img {
height: 250px;
width: 100%;
}
.dogs-list h3 {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 10px;
font-size: 18px;
}
Looking forward!

If you do not have a given structure to follow, (there was none mentioned?) try the following.
.dogs-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.dog{
width: calc(50% - 4px);
background-color: beige;
border: 2px yellow solid;
display: flex;
flex-direction: column;
}
.dogs-list img {
height: 250px;
width: 100%;
}
.dogs-list h3 {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 10px;
font-size: 18px;
}
<div className='dogs-list'>
{dog.map(data => (
<div id={data.id} className='dog'>
<img src={data.dogPic} alt='dog' />
<h3> Dog 's Name</h3> <h3> {data.name} </h3>
</div>
))}
</div>

Buttons and text won't stay within container

I have a container with some text and buttons that are responsive to the screen size, but they extend off the side of the container when there's not enough room. Someone helped me fix it by adding a clamp parameter to the font-size, but after I made a few adjustments to other parts of my code, now the problem is back.
Could someone help me figure out what I need to do to keep the buttons and text within the container? I thought I needed to adjust the min values of the clamp parameter, but that doesn't seem to change anything. It doesn't seem like the text and buttons even recognizes the parent container, they just kind of do what they want.
I have the btn-grid container set to 20% of the height of the chat_bubble, and I need the text to stay within that remaining 80% of the container.
Besides that, I'm getting a warning from WebStorm that several of my font-size declarations over-write each other, but I can't figure out which one is supposed to take priority to avoid being redundant.
Also I'm trying to add a 5vw or percent margin/padding to the top and right of the main container, but I notice that when I do a scrollbar appears even if I do overflow: hidden. Someone told me this is because of margin collapsing, but I can't figure out how to prevent that from happening because I don't see how the nested containers are taking up so much space.
This is the codepen:
https://codepen.io/TheNomadicAspie/pen/JjWVbKJ
And this is my code:
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Benne', serif;
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
color: black;
line-height: 1.25;
}
:root {
--hue-neutral: 200;
}
body {
padding: 0;
margin: 0;
display: flex;
width: 100vw;
min-height: 100vh;
justify-content: center;
align-items: center;
background-color: black;
}
#question {
font-size: 1.5rem; /* fallback */
font-size: clamp(1rem, 1.5rem, 2rem);
}
.container {
width: 90%;
height: 90%;
border-radius: 5px;
padding: 10px;
position: relative;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 10px;
margin: 20px 0;
height: 20%;
}
.btn {
background-color: purple;
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
font-family: 'Fjalla One', sans-serif;
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
}
.btn:hover {
border-color: black;
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
font-weight: bold;
padding: 10px 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
#main {
display: flex; /* Use flexbox */
flex-direction: row; /* Flex horizontally */
align-items: flex-end;
padding-left: 5vw;
overflow: hidden;
}
#chat_bubble {
width: 70vw; /* Make chat bubble 70% of viewport width */
height: 70vh; /* Make chat bubble 70% of viewport height */
background: ghostwhite !important;
}
#character_image {
float: none; /* undo float */
flex-shrink: 1; /* let character image shrink */
height: 70vh; /* Make character_image 70% of viewport height */
}
#character_image img {
height: 100%;
}
#char_1 {
display: inline-block;
}
#char_2 {
display: none;
}
#media(max-width:700px) {
#main {
flex-direction: column;
}
#chat_bubble {
width: 90vw;
}
#character_image {
height: 30vh;
}
#char_1 {
display: none;
}
#char_2 {
display: inline-block;
}
}

If you remove the explicit height: 70vh declaration on #chat_bubble and instead use min-height: 70vh to ensure that the height is at minimum 70% of the viewport height, the content wont overflow. Now, the text and buttons won't ever overflow the parent container as there isn't an explicit height set on the parent #chat_bubble. The reason the buttons overflow before this change is because the explicit width of 70vh is set on #chat_bubble and any nested content that is long enough to extend outside of the parent container will do so. I added a top/bottom margin of 5vw and auto left/right margins, you can adjust these as you see fit.
After reading your comments below, the clamp() usage is part of the problem for the text taking up so much space on the screen and forcing the #chat_bubble to have a large height. The syntax is clamp(min, flex unit, max) and your using 1.5rem for the 2nd arg, instead use a viewport unit like 3vw or anything with vw as the middle argument which is the "scale" or "flex-unit" so to speak.
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
const emailContainerElement = document.getElementById('email-container')
const submitEmailButton = document.getElementById('submit-email-btn')
const email = document.getElementById('email')
const chartContainer = document.getElementById('chart')
startButton.classList.add('hide')
emailContainerElement.classList.add('hide')
questionContainerElement.classList.remove('hide')
questionElement.innerText = 'The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.'
const button_no = document.createElement('button')
button_no.innerText = 'No'
button_no.classList.add('btn')
answerButtonsElement.appendChild(button_no)
const button_yes = document.createElement('button')
button_yes.innerText = 'No'
button_yes.classList.add('btn')
answerButtonsElement.appendChild(button_yes)
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Benne', serif;
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
color: black;
line-height: 1.25;
}
:root {
--hue-neutral: 200;
}
body {
padding: 0;
margin: 0;
overflow: hidden;
display: flex;
width: 100vw;
min-height: 100vh;
justify-content: center;
align-items: center;
background-color: black;
}
#question {
font-size: 1.5rem; /* fallback */
font-size: clamp(1rem, 3vw, 2rem);
}
.container {
width: 90%;
height: auto;
border-radius: 5px;
padding: 10px;
position: relative;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 10px;
margin: 20px 0;
height: 20%;
}
.btn {
background-color: purple;
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
font-family: 'Fjalla One', sans-serif;
font-size: 1.5rem;
font-size: clamp(1rem, 3vw, 2rem);
}
.btn:hover {
border-color: black;
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
font-weight: bold;
padding: 10px 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
#main {
display: flex; /* Use flexbox */
flex-direction: row; /* Flex horizontally (this is default flex-direction)*/
align-items: flex-end;
margin: 5vw auto;
overflow: hidden;
}
#chat_bubble {
width: 70vw; /* Make chat bubble 70% of viewport width */
min-height: 70vh; /* Make chat bubble 70% of viewport height at minimum*/
background: ghostwhite !important;
}
#character_image {
float: none; /* undo float */
flex-shrink: 1; /* let character image shrink */
height: 70vh; /* Make character_image 70% of viewport height */
}
#character_image img {
height: 100%;
}
#char_1 {
display: inline-block;
}
#char_2 {
display: none;
}
#media(max-width:700px) {
#main {
flex-direction: column;
}
#chat_bubble {
width: 90vw;
}
#character_image {
height: 30vh;
}
#char_1 {
display: none;
}
#char_2 {
display: inline-block;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test title</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Benne&family=Fjalla+One&display=swap" rel="stylesheet">
</head>
<body>
<div id="main">
<div id="chat_bubble" class="container">
<div id="email-container" class="hide">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<button id="submit-email-btn" class="btn">Submit</button>
</div>
<div id="question-container" class="hide">
<div id="question" class="question-text">Question</div>
<div id="answer-buttons" class="btn-grid">
</div>
</div>
<div id="chart" class="hide"></div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start</button>
</div>
</div>
<div id="character_image">
<img id="char_1" src="https://i.imgur.com/7eYWqqo.png" alt=""></img>
<img id="char_2" src="https://i.imgur.com/ixM8TtU.png" alt=""></img>
</div>
</div>
<link href="styles.css" rel="stylesheet">
<script defer src="script.js"></script>
</body>
</html>

Prevent div-overlapping only on window resize (w/ Styled Components)

I have a header-component that has a title to the left and some links to the right of the page. The size and position of these divs are (partially) responsive and I am happy with the way they move along when I resize my window. However, I would like the left div to act as a wall for the others. As in when I resize my window to really small the links will 'hit' the title and only then start wrapping into multiple lines. How can I do this?
<html>
<head>
<style>
.body {
position: fixed;
top: 0;
background-color: lightgoldenrodyellow;
box-sizing: border-box;
width: 100vw;
height: calc(2% + 75px);
z-index: 10000;
}
.titleContainer {
position: fixed;
left: 0;
display: flex;
align-items: center;
font-size: calc(18px + 0.5vw);
width: 250px;
min-width: 200px;
height: calc(2% + 75px);
transition: 0.3s;
margin-left: 10px;
}
.titleContainer:hover{
cursor: pointer;
}
#title {
margin-right: auto;
padding-left: 5px;
text-decoration: none;
font-size: 32px;
font-weight: 750;
font-family: Arial, Helvetica, sans-serif;
}
.pageLinkContainer {
position: fixed;
right: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: calc(2% + 75px);
width: auto;
}
.pageLink {
margin-right: 10px;
margin-left: 2px;
font-size: calc(12px + 0.3vw);
}
</style>
</head>
<body>
<div className="titleContainer">
<h3><Link id="title" to="/" >TITLE</Link></h3>
</div>
<div className="pageLinkContainer">
<Link className="pageLink" to="/upload">Upload a funny Gif</Link>
<Link className="pageLink" to="/gifs"> Look at funny Gifs</Link>
<Link className="pageLink" to="/database">Database</Link>
</div>
</body>
</html>
EDIT #3:
As per Niwo's answer below, here's my current css. I use Styled Components that create a body as a wrapper around the component. I've tried to explain the flow of the page as clearly as possible. Another idea I had was to use the window.innerWidth to make the links disappear if the window is resized.
I've updated this CSS to the working answer, for anyone who cares to know. I've also added back in my styled Components (which I removed in order to remove the React from this). All credits go to Niwo of course.
CSS
//GLOBAL STYLE
const GlobalStyle = createGlobalStyle`
body {
margin: 0;
padding: 0;
background-color: rgba(0,0,50,0.3);
height: 100%;
width: 100%;
position: absolute;
}
`
//GLOBAL CONTAINER
//A WRAPPER-DIV AROUND ALL COMPONENTS
const GlobalContainer = styled.div`
{
height: 100%;
width: 100%;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
`
//HEADER COMPONENT
//ANOTHER WRAPPER-DIV JUST FOR THIS COMPONENT
const HeaderStyle = styled.div`
{
position: fixed;
top: 0;
display: flex;
justify-content: space-between;
background-color: rgba(100,200,100,0.6);
width: 100vw;
height: calc(2% + 75px);
z-index: 10000;
}
.titleContainer {
display: flex;
flex-shrink: 0;
align-items: center;
font-size: calc(18px + 0.5vw);
width: 250px;
transition: 0.3s;
margin-left: 10px;
}
.titleContainer:hover{
cursor: pointer;
}
#title {
text-decoration: none;
font-size: 32px;
font-weight: 750;
font-family: Arial, Helvetica, sans-serif;
}
.pageLinkContainer {
right: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: calc(2% + 75px);
}
.pageLink {
white-space: nowrap;
margin: 0 0.5rem;
font-size: calc(12px + 0.3vw);
}
`
HTML
<GlobalStyle />
<GlobalContainer>
<HeaderStyle>
<div className="titleContainer">
<h3><Link id="title" to="/" >Movie Scores</Link></h3>
</div>
<div className="pageLinkContainer">
<Link className="pageLink" to="/upload">Upload a funny Gif</Link>
<Link className="pageLink" to="/gifs"> Look at funny Gifs</Link>
<Link className="pageLink" to="/database">Movies We've Seen</Link>
</div>
</HeaderStyle>
</GlobalContainer>

Use flexbox to prevent other elements from overlapping
If you want the solution on fiddle, it's right here: https://jsfiddle.net/Niwo04/o1df63L2/1/
I've cleaned your code a bit up and replaced your React stuff with normal HTML (because I don't know something about React). I also did some coloring, because I thought that might make everything visually better to understand.
If you have any questions about my changes, feel free to reply on this answer ; )
body {
margin: 0;
background-color: darkgray;
}
.body {
position: fixed;
display: flex;
justify-content: space-between;
background-color: lightgoldenrodyellow;
width: 100vw;
height: 75px;
z-index: 10000;
}
.titleContainer {
display: flex;
align-items: center;
width: 250px;
background-color: red;
flex-shrink: 0;
}
.pageLinkContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-color: blue;
}
.pageLink {
white-space: nowrap;
margin: 0 0.5rem;
}
<html>
<body>
<div class="body">
<div class="titleContainer">
<h3>TITLE</h3>
</div>
<div class="pageLinkContainer">
<a class="pageLink">Upload a funny Gif</a>
<a class="pageLink">Look at funny Gifs</a>
<a class="pageLink">Database</a>
</div>
</div>
</body>
</html>

Styling a multi-line ellipsis (...)

I'm trying to style the ellipsis (...) of a 3 line piece of text that, when clicked on, reveals the full amount of text using jQuery. Currently I've been able to create a multi-line ellipsis on 3 lines for webkit browsers, but it isn't compatible with all browsers like IE & Firefox but works on Chrome & Edge.
With the influence of this post, I can only style the ellipsis when on one line but not 3 lines of text, making sure it overrules the other CSS.
Does anyone know how to apply this styling but to an ellipsis on the 3rd line? My attempted code is below:
$('.flex-text.description').click(function() {
if ($(this).css('-webkit-line-clamp') == '3') {
$(this).css('-webkit-line-clamp', 'initial');
} else {
$(this).css('-webkit-line-clamp', '3');
}
});
.sad-flex {
display: flex;
flex-flow: row wrap;
}
.flex-item {
width: 23.5%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flex-item:not(:nth-of-type(4n+1)) {
margin-left: 2%
}
.flex-item:nth-of-type(n+5) {
margin-top: 2%
}
.flex-item-image-link {
width: 100%
}
.flex-item img {
width: 100%;
background-size: cover;
background-position: center;
}
.flex-item,
.flex-text-content {
display: flex;
flex-direction: column;
align-items: center;
font-size: 1em;
text-align: center;
position: relative;
font-family: arial;
/* perhaps remove */
justify-content: flex-start;
}
.flex-text-content {
padding: 10px;
width: 100%;
}
.flex-item .flex-text.header {
margin-bottom: 0;
font-weight: 700;
width: 100%;
}
.flex-item .flex-text.header a {
color: #000
}
.flex-item .flex-text.price {
padding-top: 20px;
font-size: 1.4em;
color: grey;
}
.flex-item .flex-text.description {
font-size: 1em;
padding-top: 20px;
overflow: hidden;
width: 100%;
height: auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
/* Other ellipsis method: */
/* max-height: 6em; */
/* limits to 3 lines of text */
/* ellipsis below: */
/* white-space: nowrap; */
/* text-overflow: ellipsis; */
/* max-width: 650px; */
/* solves the flex white-space nowrap width pushout problem */
/* Limit to 3 lines, then ellipsis */
}
.flex-item .flex-btn {
border: none;
outline: 0;
padding: 12px;
color: #fff;
background-color: #000;
cursor: pointer;
width: 100%;
font-size: 1.3em;
margin: auto auto 0 auto;
}
.flex-item .flex-btn:hover {
opacity: 0.7
}
.flex-item ul {
text-align: left
}
#media (max-width: 767px) {
.flex-item:not(:nth-of-type(4n+1)) {
margin-left: 3%
}
.flex-item {
width: 48.5%
}
.flex-item:not(:nth-of-type(even)) {
margin-left: 0
}
.flex-item:nth-of-type(n+3) {
margin-top: 3%
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sad-flex">
<div class="flex-item">
<a class="flex-item-image-link" href="#" data-galinkprocessed="true"><img src="https://cml.sad.ukrd.com/tp/3x2/" style="background-image:url(https://cml.sad.ukrd.com/image/219581.jpg)"></a>
<div class="flex-text-content">
<h2 class="flex-text header">Pine Cone</h2>
<span class="flex-text price">$81.52</span>
<span class="flex-text description">A delightful cone made of genuine North American pine, coated with sticky ooze for that authentic natural experience and some more text to just go here anyway and some more text to just go here anyway and some more text to just go here anyway.</span>
</div>
<button onclick="location.href='#'" class="flex-btn">Add to Cart</button>
</div>
</div>
I've made a codepen demo to demonstrate this: https://codepen.io/anon/pen/wRObXd

How to prevent a TextArea that resizes from overflowing the page?

I'm working to create a TextArea that is horizontally and vertically centered in the page. Given that I need the TextArea to be vertically centered, I can't have the textarea be 100w and 100h, I need it to start with a small height and then grow as the user types. I also need a click capturer so if the user clicks the area surrounding the textarea, the textarea focuses. (the gray bkg is just for debugging purposes)
I have a demo on CodePen here: https://codepen.io/anon/pen/OQbvxa
autosize(document.getElementById("note"));
$( ".textAreaClickCapturer" ).mouseup(function() {
$( "#note" ).focus();
});
html, body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.page-body.fullScreen {
display: flex;
flex: 1 1;
flex-direction: column;
height: 100%;
width: 100%;
background: #EFEFEF;
text-align: left;
padding: 0!important;
align-items: normal;
justify-content: normal;
}
form {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
form .textAreaClickCapturer {
width: 100%;
height: 100%;
display: flex;
overflow: hidden;
align-items: center
}
form .field {
width: 100%;
margin: 0;
padding: 24px;
clear: both;
max-height: max-content;
height: 100%;
align-items: center;
}
textarea {
border: none;
border-radius: 0;
font-size: 21px;
line-height: 28px;
padding: 0;
vertical-align: top;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<div class="page-body fullScreen ">
<form action="/">
<div class="textAreaClickCapturer" role="presentation">
<div class="field">
<textarea id="note" placeholder="Say something..." rows="3"></textarea>
</div>
</div>
</form>
</div>
When you type in multiple lines, the TextArea does grow nicely but eventually, the TextArea grows pasts the size of the screen causing it to break.
How can I get the TextArea are to grow where the TextArea doesn't go behind the page and break but has a working overflow to handle lots of text?
Desired Initial Experience
Broken UI, when the textarea grows past the surrounding div.
Thank you!

The main reason is that when using align-items: center and/or justify-content: center, the element overflow its parent both at, in this case, top/bottom.
To solve that, one need to use auto margin's instead, and with that be able to control the alignment both vertical and horizontal, top/bottom, left/right, etc.
You also had a lot of height: 100% in your code (which I cleaned up), and combined with Flexbox, that cause more issues, so instead use Flexbox's own properties, e.g. here flex: 1 on flex column items, that will fill the parent's height.
Also added min-height: 0 so Firefox play along.
Updated codepen
Stack snippet
autosize(document.getElementById("note"));
$( ".textAreaClickCapturer" ).mouseup(function() {
$( "#note" ).focus();
});
html,
body {
margin: 0;
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.page-body.fullScreen {
flex: 1;
display: flex;
flex-direction: column;
background: #efefef;
min-height: 0;
}
form {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
form .textAreaClickCapturer {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
form .field {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
padding: 24px;
}
textarea {
border: none;
border-radius: 0;
font-size: 21px;
padding: 0;
width: 90%;
text-align: center;
overflow: auto;
margin: auto;
}
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-body fullScreen ">
<form action="/">
<div class="textAreaClickCapturer" role="presentation">
<div class="field">
<textarea id="note" placeholder="Say something..." rows="3"></textarea>
</div>
</div>
</form>
</div>

I think you can use max-width and max-height:
textarea {
...
max-width: 100%;
max-height: 100%;
}
Update
I simplified both HTML and CSS, snippet:
autosize(document.getElementById("note"));
$(".textAreaClickCapturer").mouseup(function() {
$("#note").focus();
});
html, body, form {
height: 100%;
}
body {
background: #efefef;
margin: 0;
}
form {
display: flex;
align-items: center; /*center vertically*/
padding: 24px;
box-sizing: border-box;
}
textarea {
font-size: 20px;
text-align: center;
width: 100%;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<form class="textAreaClickCapturer" action="/">
<textarea id="note" placeholder="Say something..." rows="3"></textarea>
</form>

I tried the following in your pen:
In the textarea selector in CSS, add:
max-height: 90%;
overflow: auto;
This gives you a scrollbar if the content entered exceeds the max height, and the max-height is controlled by the containing div's size.

Add a max height, like the others have said, me personally I prefer to use vh when relating to height in your situation. So in your pen it would just be:
textarea {
border: none;
border-radius: 0;
font-size: 21px;
line-height: 28px;
padding: 0;
vertical-align: top;
width: 100%;
text-align: center;
max-height:50vh;
}
and you're squared away. Your vertical overflow is scrolling by default so there really isn't any more you have to do.