如何强制CSS网格列在父容器内占用尽可能多的空间？

Question

我有以下布局：

.table {
  display: grid;
  grid-template-columns: fit-content(100%) auto;
}

.grid-item {
  height: 50px;
  padding: 8px;
  border: 1px solid grey;
}

.a {
  background-color: #feb5f5;
}

.b {
  background-color: #76daff;
}

<div style="display: flex; align-items: center; flex-direction: column; background-color: #ddff33">
  <div style="max-width: 1500px; background-color: #ccaa44; display:flex; align-items: first baseline; flex-direction: column;">
    <div class="table">
      <div class="grid-item a">Constant</div>
      <div class="grid-item b">Variable size content that should take as much space as possible</div>
    </div>
  </div>
</div>

它应遵循以下规则。我有WPF背景，但是很难在HTML / CSS中完全实现它们：

1. 页面内容的最大宽度为1500px，位于水平居中位置。如果视口小于1500px，则内容应缩小（换句话说，应以上限为准）。
2. 该居中内容本身是两列的网格：
   1. 左列应占用最小水平空间（Auto中的WPF列大小。
   2. 右列应占用所有可用空间（*中的WPF列大小）：
      1. 如果视口足够大，则达到1500像素的限制。
      2. 如果小于1500像素，则保留剩余的所有视口空间。

如果没有“居中的1500像素”规则（1fr或auto或max-content列大小对我有用，那么这将不是问题，但是正如您在上段代码中看到的那样）不会占用所有可用的1500像素。

StackOverflow的剪切宽度为800像素，这意味着此处根本不应该有黄色空间。

这种行为的问题是，右列的内容（在我的应用中）可以通过js代码重新加载，这导致其零秒宽度为零。在当前布局下，这意味着左列“跳”向中心并返回几分之一秒，这看起来很糟糕。

我试图以两种方式实现解决方案：

1. 尝试使用不同的网格列大小以使其占据所有可能的空间（似乎不起作用）。
2. 在1500px容器内引入其他容器，该容器将占用所有可用空间，并将子网格居中向左。我认为这应该可行，但无法准确地思考。
3. 也许我应该使用代码段中的flex容器以外的其他方式将居中并限制到1500像素子网格？

如果2可以正常工作，则视口> 1500px的布局应如下所示：

我也有Bootstrap 4，但希望我可以将CSS网格专门用于布局。

Answer 1

我们可以简单地使用margin:auto居中

[container] {
/*     display: flex; */
/*     align-items: center; */
/*     flex-direction: column; */
    background-color: #ddff33
}

[widthconstraint] {
    max-width: 1500px;
    margin:auto;
    background-color: #ccaa44;
/*     display: flex; */
/*     align-items: first baseline; */
/*     flex-direction: column; */
}

.table {
    display: grid;
    /*   grid-template-columns: fit-content(100%) auto; */
    grid-template-columns: auto 1fr;
}

.grid-item {
    height: 50px;
    padding: 8px;
    border: 1px solid grey;
}

.a {
    background-color: #feb5f5;
}

.b {
    background-color: #76daff;
}

<div container>
  <div widthconstraint>
    <div class="table">
      <div class="grid-item a">Constant</div>
      <div class="grid-item b">Variable size content that should take as much space as possible</div>
    </div>
  </div>
</div>

---

您的代码的问题是，弹性项默认情况下为flex-shrink:1;flex-grow:0;，因此它们不会增长以填充父项，它们会收缩以适合其内容。如果您想使用flexbox居中，则修复很明显。

[container] {
    display: flex;
    /*     align-items: center; */
    /*     flex-direction: column; */
    justify-content: center;
    /* Align horizontally */
    background-color: #ddff33
}

[widthconstraint] {
    flex: 1 0 0;
    max-width: 1500px;
    background-color: #ccaa44;
    display: flex;
    /* align-items: first baseline; */
    /* flex-direction: column; */
}

.table {
    flex: 1 0 0;
    display: grid;
    /*       grid-template-columns: fit-content(100%) auto; */
    grid-template-columns: auto 1fr;
}

.grid-item {
    height: 50px;
    padding: 8px;
    border: 1px solid grey;
}

.a {
    background-color: #feb5f5;
}

.b {
    background-color: #76daff;
}

<div container>
  <div widthconstraint>
    <div class="table">
      <div class="grid-item a">Constant</div>
      <div class="grid-item b">Variable size content that should take as much space as possible</div>
    </div>
  </div>
</div>

注意：该代码是自解释性的，但是，如果您有任何疑问，请务必提出。我冒昧地整理了一下代码