In my current setup, I have a div with the class "d-flex flex-column" that contains a navbar and a container. Within this container, there is another div with the class "d-flex flex-column" which then contains two rows. I am using flex-grow to make the container fill the page, but I am having trouble making the second row within the nested container grow to fill its parent after setting the parent to fill the viewport height using flex-grow in Bootstrap v4.
I am wondering if combining flex and container is not the best approach for achieving what I want. If that's the case, could you provide guidance on how I should proceed?
When I attempt to set the height of the inner row to expand accordingly within the container that is already filling the height, it just stays the same height and does not adjust as intended.
<div class="d-md-flex flex-column h-100">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<button class="btn btn-outline-warning mr-auto" type="submit">Back</button>
<button class="btn btn-outline-success" type="submit">Logout</button>
</nav>
<div class="container-fluid flex-grow">
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<div class="btn-toolbar justify-content-between" id="label-toolbar">
<div class="btn-group">
<select class="form-control form-control-sm" id="label-option">
<option>Main</option>
<option>Unknown</option>
</select>
<button type="button" class="btn btn-outline-primary btn-sm" id="create-button">Create</button>
<button type="button" class="btn btn-outline-primary btn-sm" id="delete-button">Delete</button>
<button type="button" class="btn btn-outline-primary btn-sm" id="edit-button">Edit</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-success btn-sm" id="previous-button">Previous</button>
<button type="button" class="btn btn-outline-success btn-sm" id="next-button">Next</button>
</div>
</div>
<div id="draw-area"></div>
</div>
</div>
</div>
<div class="col-md-3 label-sidebar"></div>
</div>
</div>
</div>
Update: I encountered an error when implementing @ZimSystem code. What steps should I take to resolve this issue?