CSS Grid с Bootstrap 4: проблема с макетом при использовании `col-auto` и` col` с модулем fr

Question

https://codepen.io/jakedx6/pen/EOYBEM

В вышеприведенной демонстрации я бы ожидал, что центральный 'col' уменьшится, но, похоже, что-то его останавливает. Пример кода изначально предназначен для приложения angular 7, использующего ngx-bootstrap для раскрывающегося списка, поэтому вы увидите эти атрибуты в приведенном ниже коде.

Не уверен, что проблема не в том, правильно настроен, загрузчик 4 или CSS grid

HTML для ссылки:

<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, определяющий сетку:

.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;
  }
}

без CSS-сетки он работает как положено: https://codepen.io/jakedx6/pen/EOxjWv (демо без CSS-сетки)

Редактировать: когда я меняю единицу сетки 1fr на 100%, она работает как положено. Есть ли способ исправить это и по-прежнему использовать тип блока 1fr?

Answer 1

Исправление, которое я реализовал, использовало 100% вместо 1fr при определении сетки. Я хотел бы знать, есть ли лучший способ исправить это!