Элемент сетки остается фиксированным по размеру при изменении размера элемента

Question

У меня есть сетка из 2 столбцов, к которой я успешно прикрепил дескриптор изменения размера. Мне нужно равномерно распределить содержимое между столбцами, а затем с правой стороны заполнить доступное пространство при уменьшении левого размера. Я попробовал два подхода. Первым является определение сетки с помощью

grid-template-columns: [left] 1fr [right] 1fr;

, которая правильно размещает содержимое, но не изменяет размер правого элемента div после его начальной точки. Он остается в исходном размере и никогда не следует за изменением размера.

Я также пробовал

grid-template-columns: [left] min-content [right] 1fr;

, что не удается, потому что он не делит столбцы в равных долях и не позволяет изменять размеры меньше, чем min-content.

Вот код.

body {
  margin: 10px;
  height: 100%;
}

.outer {
  display: grid;
  border: 3px dotted red;
  padding: 3px;
  grid-gap: 3px;
  grid-template-columns: [left] 1fr [right] 1fr;
}

.left {
  grid-area: left;
  border: 3px dotted blue;
  overflow: auto;
  resize: horizontal;
  min-width: 100px;
  max-width: 75vw;
}


.right {
  grid-area: right;
  border: 3px dotted gray;
  overflow: auto;
}

 <div class="outer">
   <div class="left">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
       dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
   <div class="right">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
       dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
 </div>

Answer 1

Используйте auto вместо 1fr.

Элементы сетки существуют внутри дорожек сетки (столбцы и строки).

Когда вы устанавливаете свой контейнер на:

grid-template-columns: 1fr 1fr

... дорожки столбцов заморожены на месте . Функция изменения размера работает с элементами сетки, но не влияет на дорожки.

Вы увидите то же ограничение с:

grid-template-columns: 50% 50%

Однако вы можете обойти проблему с:

grid-template-columns: auto auto

.outer {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 3px;
  border: 3px dotted red;
  padding: 3px;
}

.left {
  resize: horizontal;
  overflow: auto;
  border: 3px dotted blue;
}

.right {
  overflow: auto;
  border: 3px dotted gray;
}

<div class="outer">
  <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>