dynamic height

by magizter

HTML

<div class="container">
    <div class="dashboard">dashboard dashboard dashboard dashboard dashboard dashboard dashboard dashboard dashboard dashboard dashboard dashboard dashboarddashboard dashboard dashboard dashboard dashboard dashboard dashboard dashboarddashboard dashboard dashboard dashboarddashboard</div>
    
    <div class="blotter-container">
        <div class="blotter">blotter</div>
    </div>
    
</div>

CSS

.container {
  position: absolute;
  top: 0; bottom:0;
    height: 100%;
    width: 500px;
    display: flex;
    flex-direction: column;
}
.dashboard {
    width:100%;
    background-color: blue;
}
.blotter-container {
    position: relative;
    flex: 1;
    background-color: red;
    display: flex;  
}
.blotter {    
    background-color: green;
    flex: 1;
}