CSS Grid with Bootstrap 4: layout problem when using `col-auto` and `col` with fr unit

Question

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?

Answer 1

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!