是否可以根据内容设置比例网格列？

Question

使用 Flexbox 或 CSS Grid，是否可以根据其中一列的内容调整列的大小？

这是我想要的：

我有 2 列，一个 main 和一个 side.

|------------------------container--------------------------|
|                                                           |
||----------------------------------------|----------------||
||               main                     |      side      ||
||----------------------------------------|----------------||
|                                                           |
|-----------------------------------------------------------|

我希望 side 根据其内容自动调整大小，我希望 main 的宽度是边，至少。它可以变大，但不能变小。

随着容器的增加，main 将以相同的速率增长，而 side 保持其自动宽度。

|--------------------------container increases----------------------|
|                                                                   |
||------------------------------------------------|----------------||
||                   main increases               |      side      ||
||------------------------------------------------|----------------||
|                                                                   |
|-------------------------------------------------------------------|

容器可以缩小到 side 的 3 倍大，此时 main 的宽度将是 main 的两倍一侧。我希望这是断点。

|--------------------container----------------------|
|                                                   |
||--------------------------------|----------------||
||               main             |      side      ||
||--------------------------------|----------------||
|                                                   |
|---------------------------------------------------|

如果容器再缩小，我希望列堆叠，现在两列都是 100% 宽度：

|--------------------container--------------------|
|                                                 |
||-----------------------------------------------||
||               main                            ||
||-----------------------------------------------||
||-----------------------------------------------||
||                           side                ||
||-----------------------------------------------||
|                                                 |
|-------------------------------------------------|

这是我尝试过的：

我尝试用 Flexbox 和 Grid 来做这个，但是我无法让主列根据侧列来确定它的大小。

.container-grid {
  display: grid;
  grid-template-columns: 1fr auto; /* works, but doesn’t wrap when left column gets too small */
  /* I also tried the repeat() syntax, but that only worked for similarly-sized columns */
}

.container-flex {
  display: flex;
  flex-wrap: wrap;
}
.main { flex: 2; } .side { flex: 1; } /* same problem, doesn’t wrap */
.main ( flex: 0 1 auto; } .side { flex: 0 0 auto; } /* wraps columns too early, any time main is smaller than intrinsic width */

我尝试过的唯一可行的解决方案是知道侧栏的固定宽度（我必须在不知道其内容的情况下进行预测），然后使用 3 倍宽度的媒体查询。当然，媒体查询仅适用于 window 宽度，不适用于容器宽度，因此我必须使用容器的任何父元素来计算媒体查询。

.container-grid {
  display: grid;
  grid-template-columns: 1fr 15em;
}
@media screen and (max-width: 45em) {
  .container-grid {
    grid-template-columns: 1fr;
  }
}

Answer 1

这是一个解决方案，使用 Flexbox，您使用的 flex-grow 值在 main 上比在 side 上大得多.

有了这个，side 将在包裹时填充 parent，在宽屏上，main 上的值更高， flex-growth on side 实际上是 none.

结合 main 上的 min-width 是 side 的两倍大小，它会在变小之前换行，为此我们可以按原样使用百分比基于 parent 的宽度。

所以在这种情况下，main 的两倍大小将是 parent 的 2/3，66.666%。

Fiddle demo

堆栈片段

.container-flex {
  display: flex;
  flex-wrap: wrap;
}

.main {
  flex: 10000;
  min-width: 66.666%;
  background: lightblue;
}

.side {
  flex: 1 0 auto;
  background: lightgreen;
}

span {
  display: inline-block;
  padding: 20px;
}

<div class="container-flex">

  <div class="main">
    <span>Fill remain, min. twice the "side"</span>
  </div>

  <div class="side">
    <span>Take content size</span>
  </div>

</div>

是否可以根据内容设置比例网格列？

Is it possible to set proportional grid columns based on content?

css

layout

flexbox

css-grid

这是我想要的：

这是我尝试过的：