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

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>