Cards

by Serhii Matrunchyk

HTML

<!DOCTYPE HTML>
<html lang="bg" class="no-js">

  <head>
    <meta charset="utf-8">
  </head>

  <body>

  <main>

    <div class="flex-parent-row">
   <div class="flex-child">
      <div class="auto-height"> auto div</div>
      <div class="i-want-this-one-to-fill-remaining-height"> fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/>fill remaining div<br/></div>
      <div class="auto-height"> auto div</div>
   </div>
</div>

  </main>
  </body>

</html>

CSS

.flex-parent-row {
    display: flex;
    flex-direction: column;
    height: 200px;
    width: 500px;
    border: 1px solid #000;
 }
.flex-child {
    border: 1px solid #000;
    background-color: red;
    display: flex;  
    flex-direction: column;
    flex-grow: 1; 
 }
 .auto-height {
    background: orange;
 }

 .i-want-this-one-to-fill-remaining-height {
    background-color: lightblue;
    overflow: hidden;
 }