02. Deconstructed Pancake

data:uri

data:text/html,
<div class="parent" style="  display: flex; flex-wrap: wrap;">
 <div class="child" style="flex: 1 1; height: 100vh; ">
 <textarea style="
width: 90%;
  height: 75%;
  font-size: 2rem;
  align-text: center;
  border: 4px;
  border-radius: 20px;
  margin: 5px ;
  padding: 5px;
  background: #75E6DA;"> 
 </textarea> 
 </div>
<div class="child" style="flex: 1 1; height: 100vh; ">
 <textarea style="
width: 90%;
  height: 75%;
  font-size: 2rem;
  align-text: center;
  border: 4px;
  border-radius: 20px;
  margin: 5px ;
  padding: 5px;
  background: #75E6DA;"> 
 </textarea> 
 </div>
<div class="child" style="flex: 1 1; height: 100vh; ">
 <textarea style="
width: 90%;
  height: 75%;
  font-size: 2rem;
  align-text: center;
  border: 4px;
  border-radius: 20px;
  margin: 5px ;
  padding: 5px;
  background: #75E6DA;"> 
 </textarea> 
 </div>
</div>

index.html

<div class="parent">
 <div class="child">
 <textarea> </textarea> 
 </div>
  <div class="child">
 <textarea></textarea> 
 </div>
  <div class="child">
 <textarea></textarea> 
 </div>  
</div>

style.scss

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  //  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  //  If we don't want the items to stretch:
  // flex: 0 1 300px;
  //  If we do want the items to stretch:
    flex: 1 1;
  
  //   etc.
  height: 100vh;
  
}
textarea {
  width: 90%;
  height: 75%;
  font-size: 2rem;
  align-text: center;
  border: 4px;
  border-radius: 20px;
  margin: 5px ;
  padding: 5px;
  background: #75E6DA;
 
  
}

body {
  font-family: system-ui, serif;
}