The center 'col' element in the demo above should shrink, but something is preventing it. The code provided is originally for an Angular 7 application using ngx-bootstrap for the dropdown, so you'll notice those attributes in the code snippet below.
I'm unsure if the issue stems from incorrect setup, Bootstrap 4, or CSS grid.
Here's the HTML code for reference:
<div class="page-layout">
... (HTML code here) ...
</div>
Below is the SCSS defining the grid:
.page-layout {
... (SCSS code here) ...
}
If you want to see how it works without CSS grid layout, check out this link: Demo without CSS grid
Edit: When I change the grid unit from 1fr to 100%, everything works as expected. Is there a way to resolve this while still utilizing the 1fr unit type?