CSS 网格和缩小优先级

Question

我想使用 CSS 网格作为我的应用程序的主布局，但我正在努力寻找正确的公式

这是我想要实现的设计的结构（Stackbliz 这里）

• 整个设计应水平填充空间
• main部分（绿色）包含无法换行的文本
• aside部分（蓝色）包含一些随机文本。我希望它的 min-with 为 200px 和 max-width 为 300px

以下是我尝试执行的规则：

• 在超大屏幕上：aside部分的宽度应为300px，而main部分应占据剩余空间
• 如果没有足够的空间完全显示标题，则aside部分应优先缩小，缩小至200px
• 如果仍然没有足够的空间来完全显示标题，则aside部分的宽度应为200px，而main部分应在标题上显示text-ellipsis

到目前为止，我有这个：

#grid-wrapper {
  display: grid;
  height: 100vh;

  grid-template-columns: minmax(0, 100%) minmax(200px, 300px);
  grid-template-areas: 'area-main area-aside';
}

main {
  grid-area: area-main;
  background-color: #1abc9c;
  padding: 1rem;
}

main h1 {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

aside {
  grid-area: area-aside;
  background-color: #2980b9;
  padding: 1rem;
}

我得到的结果几乎是正确的，除了aside部分没有缩小到200px

Answer 1

fit-content 和 min-width 可能就是您正在寻找的：

示例：

section {
  display:grid;
  grid-template-columns: auto fit-content(300px);
  margin-bottom:.5em;
}
article {
  background-color: #1abc9c;
  padding: 1rem;
}

aside {
  background-color: #2980b9;
  padding: 1rem;
  box-sizing:border-box;
  min-width:200px;
}
/* show me where aside stands with the 0-300px range */
body {
  margin:0;
  padding:1em 0;
  background:linear-gradient(to left,silver 200px,  gray 200px 300px, white 300px);
}

<section>
  <article>
    article
  </article>
  <aside>
    aside
  </aside>
</section>
<section>
  <article>
    article
  </article>
  <aside>
    an aside a bit longer than the other one
  </aside>
</section>
<section>
  <article>
    article
  </article>
  <aside>
    an aside a bit much longer than the other one
  </aside>
</section>

Answer 2

我认为这里的问题是： CSS 网格环绕 或者使用显示柔性可以帮助你