2

我有一个 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>

4

1 回答 1

0

使用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>

于 2020-02-22T16:19:25.007 回答