I have a parent div in a grid with height of 29rem + 1fr. In the div there are four children. First and third have a fixed height (both have the same height as their content that does not change), and second and fourth must have dynamical height because of their content.
HTML:
<body>
<div class="unplanned"> Index
<div class= "header"> </div>
<div class="filter_line">filter: line </div>
<div class="filter_date">filter: date </div>
<div class="table">table </div>
</div>
</body>
CSS:
.unplanned {z-index: 1500;
grid-area: unplanned;
width: 30rem;
height: 96vh;/*right now it's set as fixed height that does not work it there is less content in filter_line*/}
.fitler_line {display: inline-block;
margin-bottom: 3rem;
margin-top: 3.3rem;
margin-left: 2.9rem;}
.fitler_date {margin-left: 4rem;
margin-bottom: 3rem;
position: relative;
padding-bottom: 2rem;}
.table {text-align: center;
overflow-y: auto;
height: calc( 100% - 32rem ); /*right now it's set as fixed height that does not work it there is less content in filter_line*/}
I have tried adding height: auto to "filter_line" and "table" and it works to an extend. It fits all lines in "filter_line" but it cuts off the table without scroll. Flex will not work, because it messes with grid.
Is there an elegant solution in CSS or Sass that will fit all of "table" content without JS?