I am currently designing a dashboard-like layout with two rows. The top row is not as important, but the second row is presenting a challenge. It consists of two divs with varying heights.
My goal is to have the left div fill the available space without overflowing or extending beyond the parent container, while allowing the right div to stretch the parent if it contains more content. Is this even achievable?
There's a slight complication to my query. I still need the ability to toggle these divs on and off using jQuery .slideToggle, and the left div often has lengthy content requiring a scroll.
I attempted to solve this using position: absolute and min-height, but toggling the left panel became clunky due to the min-height constraint. You can view a demonstration of this approach here
$(document).on("click", ".header", function() {
let el = $(this).closest(".parent").find(".body");
el.slideToggle();
}).row {
display: flex;
flex-wrap: wrap;
margin-right: -7.5px;
margin-left: -7.5px;
}
.column {
flex: 0 0 50%;
max-width: 50%;
padding-right: 7.5px;
padding-left: 7.5px;
box-sizing: border-box;
}
.parent {
position: relative;
display: flex;
flex-direction: column;
}
.header {
background: gray;
border-radius: 10px 10px 0 0;
text-align: center;
}
.body {
background: #33333322;
border-radius: 0 0 10px 10px;
flex: 1 1 auto;
min-height: 1px;
padding: 1.25rem;
}
.responsive_table {
overflow-x: auto;
}
table {
width: 100%;
}
table tr td {
border-bottom: 1px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="row">
<div class="column">
<div class="parent">
<div class="header">toggle</div>
<div class="body">
<div class="responsive_table">
<table>
<tr>
<td>First line</td>
</tr>
<tr>
<td>Second line</td>
</tr>
<tr>
<td>3rd line</td>
</tr>
<tr>
<td>4th line</td>
</tr>
<tr>
<td>5th line</td>
</tr>
<tr>
<td>6th line</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="column">
<div class="parent">
<div class="header">toggle</div>
<div class="body">
<div>
some text<br /> some text<br /> some text<br /> some text<br /> some text<br /> some text<br />
</div>
</div>
</div>
</div>
</div>