纯CSS Grid列调整器(resizer)异常问题求助

我尝试仅用CSS调整CSS Grid布局中中间"results"列的宽度，三个测试示例仅右侧面板的<p>文本内容不同：示例1和2中调整器工作正常，但示例3中当两个右侧面板的<p>仅保留一个单词时，中间面板调整时会向两侧收缩，如同居中对齐一般。

相关CSS代码 #

*:before, *:after, *, ::after, ::before {box-sizing: border-box;}

body {
  padding: 0;
  margin: 0;
}

/* GRID ONLY FOR LAYOUT */

/* PANEL WRAPPER */
app-container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  padding: 1rem;
  height: 100vh;
  overflow: hidden;
}

/* ALL PANELS */
app-panel {
  display: grid;
  border-radius: .3rem;
  overflow: hidden;
  border: solid 1px rgba(255,255,255,0.1);
  align-content: start;
}

/* HEADER/FOOTER */
app-panel:first-of-type,
app-panel:last-of-type {
  grid-column: 1 / -1;
  grid-auto-flow: column;
  grid-auto-columns: 1fr 1fr 1fr;
  padding: 1rem;
}

app-class {justify-self: center;}
app-user, app-version {justify-self: end;}

/* NAV */
app-panel:nth-of-type(2) {width: max-content;}

app-panel:nth-of-type(3) {
  resize: horizontal; /* the STUPID resizer */
  min-width: 20rem;
  max-width: 60vw; /* keeps resizer from going beyond edge of screen */
}

/* Just to show nothing special about <p>s... */
p, h2 {
  margin: 0;
  padding: 1rem
}

相关HTML代码 #

<!-- Minimal structural markup -->

<app-container>
  <!-- header -->
  <app-panel></app-panel>
  <!-- nav -->
  <app-panel>
    <panel-list>
      <list-item></list-item>
      <list-item></list-item>
      <list-item></list-item>
    </panel-list>
  </app-panel>
  <!-- results -->
  <app-panel>
    <panel-list>
      <list-item></list-item>
      <list-item></list-item>
      <list-item></list-item>
    </panel-list>
  </app-panel>
  <!-- details -->
  <app-panel>
    <p></p>
  </app-panel>
  <!-- meta -->
  <app-panel>
    <p></p>
  </app-panel>
  <!-- footer -->
  <app-panel></app-panel>
</app-container>

问题根源在app-container的grid-template-columns: repeat(4, auto)配置上：

• 当右侧两个面板的<p>只有单个单词时，面板宽度会收缩到内容本身的宽度，此时Grid容器的剩余空间会被所有auto类型的列重新分配。
• 带有resize: horizontal的中间results列在调整时，Grid会重新计算所有列的宽度，导致两侧的列同时被挤压或拉伸，视觉上呈现出"居中收缩"的效果。
• 而当右侧面板有长文本时，文本换行撑满面板宽度，面板无法再收缩，所以调整results列时只会挤压右侧面板，表现正常。

可以通过两种方式解决这个问题：

方案1：给右侧面板添加最小宽度约束 #

给details和meta面板设置min-width，避免它们收缩到过小宽度：

app-panel:nth-of-type(4),
app-panel:nth-of-type(5) {
  min-width: 15rem; /* 根据实际需求调整数值 */
}

方案2：修改Grid列模板规则 #

调整grid-template-columns，明确列的宽度分配逻辑，比如让导航列固定宽度，results列可调整，右侧两列占剩余空间：

app-container {
  grid-template-columns: max-content auto 1fr 1fr;
}

保留results列的resize、min-width和max-width设置，此时调整results列只会挤压右侧的弹性列，不会出现向两侧收缩的异常表现。

内容的提问来源于stack exchange，提问作者D7460N