调整同级项目的大小时，网格项目的大小保持固定

Question

我有一个2列网格，我已成功将调整大小手柄附加到该网格。我需要在各列之间平均分配内容，然后在缩小左侧大小时让右侧填充可用空间。我尝试了两种方法。首先是使用

定义网格

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

可以正确定位内容，但不会在其起始点之后调整正确的div大小。它保持原始大小，从不遵循调整大小。

我也尝试过

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

之所以失败，是因为它无法平均划分列，并且不允许将大小调整为小于最小内容。

这是代码。

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>