I've been struggling to perfect this formatting for quite some time now. While I've come across many similar examples to what I'm aiming for, I just can't seem to get it right.
My goal is to create a form that will "popup" using JS for users to fill in. I've managed to handle the JS and other styling aspects with no problem, so I've simplified it to the most basic example that still demonstrates what I'm trying to accomplish.
The header section includes fields for "name" and "description" that need to be filled in, and potentially a few other fields dynamically added. The header might expand by a field or two, so the exact height is unknown. I want the rest of the form, a scrollable list, to adapt its size based on the content added to the header.
I've explored numerous suggestions and attempted to use display: flex;, display: table;, and Display: grid; without success.
I believe I'm overlooking a small detail (or perhaps not), and I'm incredibly frustrated at this point after spending days trying to finalize this single form.
Here's my basic form without all my failed attempts. All I want is for the "form-detail" to scroll within the remaining space of the "container". I know I can achieve this by hard-coding the heights, but as stated earlier, extra content can be dynamically added to the "form-header", making its height uncertain.
Essentially, I need the pink area to stay within the green area (and scroll) with a dynamically changing height for the blue area (depending on whether the optional fields are shown or hidden).
Below is the CSS code:
.container {
position: absolute;
left: 50px;
top: 50px;
width: 400px;
height: 400px;
background-color: lightgreen;
text-align: center;
}
.title {
margin-top: 5px;
}
.form-header {
padding-bottom: 10px;
margin: 5px;
border-bottom: 2px solid black;
background-color: lightblue;
}
.form-header input, textarea {
width: 95%;
}
.form-detail {
margin: 5px;
background-color: pink;
overflow-y: scroll;
}
Here's the HTML code:
<div class="container">
<form>
<div class="form-header">
<div class="title">Name</div>
<div><input type="text"></div>
<div class="title">Description</div>
<div><textarea type="text" rows="5"></textarea></div>
<div class="title">Optional 1</div>
<div><input type="text"></div>
<div class="title">Optional 2</div>
<div><input type="text"></div>
</div>
<div class="title">List</div>
<div class="form-detail">
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
</div>
</form>
</div>
View the Fiddle here: (https://jsfiddle.net/logan5_42/nz418o9d/14/)