<h1 class="h1">flex inner height 100%</h1> <div class="wrap"> <div class="inner"> <div class="inner_inner"> <h1>test</h1> <div class="textarea"> <p>test</p> <p>test test</p> </div> </div> </div> <div class="inner"> <div class="inner_inner"> <h1>test</h1> <div class="textarea"> <p>test</p> <p>test test</p> <p>test test</p> </div> </div> </div> <div class="inner"> <div class="inner_inner"> <h1>test</h1> <div class="textarea"> <p>test</p> <p>test test</p> <p>test test</p> <p>test test</p> </div> </div> </div> </div>
body { width: 100%; min-height: 100vh; padding-bottom: 50px; background-image: linear-gradient(45deg, #F7CAC9 15%, #91A8D0 85%); } .h1 { margin: 2em; font-family: 'Dancing Script', cursive; color: rgba(white, .85); } .wrap { display: flex; justify-content: space-around; } .inner { display: flex; background-image: linear-gradient(0deg, rgba(white, .5) 20%, rgba(white,0) 90%) ; } .inner_inner { display: flex; justify-content: space-between; flex-direction: column; }