您如何在具有调整大小属性的网格中平均分割内容

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。

[当您将fr和百分比单位与grid-template-columns一起使用时，音轨看起来是固定的。但是，使用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>