https://codepen.io/jakedx6/pen/EOYBEM
In the above demo, I would expect the center 'col' to shrink but something seems to stop it. The code sample is originally for an angular 7 application using ngx-bootstrap for the dropdown so you will see those attributes in the code below.
Not sure if the issue is something not set up correctly, bootstrap 4 or CSS grid
HTML for referance:
<div class="page-layout">
<div class="page-header p-3">
<div class="text-truncate" body>Main Header</div>
</div>
<div class="page-subheader p-3">
<div class="text-truncate" body>Sub-Header</div>
</div>
<div class="page-content">
<main role="main" class="container-fluid">
<div class="row mx-3 my-3">
<div class="col-auto p-0">
<div class="row">
<div class="index-number mb-3 font-weight-bold py-2">1</div>
</div>
<div class="row">
<div class="index-number mb-3 font-weight-bold py-2">2</div>
</div>
<div class="row">
<div class="index-number mb-3 font-weight-bold py-2">3</div>
</div>
</div>
<div class="col px-0" cdkDropList>
<div class="col mb-3 pr-0 ngFor" cdkDrag>
<div class="card">
<div class="row m-0">
<div class="col-auto px-0" style="background:#ddd">
<div cdkDragHandle class="col-auto border-right draggable py-2">
Auto Left
</div>
</div>
<div class="col text-truncate py-2">
Center Text, This can be a pretty long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="col-auto border-left" style="background:#ddd">
<div class="btn-group py-2 ">
Auto-Right
</div>
</div>
</div>
</div>
</div>
<div class="col mb-3 pr-0 ngFor" cdkDrag>
<div class="card">
<div class="row m-0">
<div class="col-auto px-0" style="background:#ddd">
<div cdkDragHandle class="col-auto border-right draggable py-2">
Auto Left
</div>
</div>
<div class="col text-truncate py-2">
Center Text, This can be a pretty long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="col-auto border-left" style="background:#ddd">
<div class="btn-group py-2">
Auto-Right
</div>
</div>
</div>
</div>
</div>
<div class="col mb-3 pr-0 ngFor" cdkDrag>
<div class="card">
<div class="row m-0">
<div class="col-auto px-0" style="background:#ddd">
<div cdkDragHandle class="col-auto border-right draggable py-2">
Auto Left
</div>
</div>
<div class="col text-truncate py-2">
Center Text, This can be a pretty long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="col-auto border-left" style="background:#ddd">
<div class="btn-group py-2">
Auto-Right
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
SCSS defining the grid:
.page-layout {
display: grid;
height: 100%;
grid-template-columns: 1fr;
grid-template-rows: 56px 56px 1fr;
grid-template-columns: 1fr;
grid-template-areas: "page-header" "page-subheader" "page-content";
.page-header {
grid-area: page-header;
background-color: #eee;
border-bottom: solid 1px #bbb;
height: 2em;
min-height: 56px; //fix for ie
}
.page-subheader {
grid-area: page-subheader;
background-color: #eee;
border-bottom: solid 1px #bbb;
height: 2em;
min-height: 56px; //fix for ie
}
.page-content {
grid-area: page-content;
}
}
without the CSS grid layout it works as expected: https://codepen.io/jakedx6/pen/EOxjWv (demo without CSS grid)
Edit: when I change the grid 1fr unit to 100% it works as expected. Is there a way to fix this and still use the 1fr unit type?
The fix I implemented was using 100% instead of 1fr when defining the grid. I would love to know if there is a better way of fixing this!