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

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

以下是我想要的： 我有两列，一列是主列，一列是边列

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

我希望侧边根据其内容自动调整大小，并且我希望主边的宽度至少是侧边的两倍。它可以变大，但不能变小

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

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

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

|--------------------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 */
}

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

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

---

这里有一个解决方案，使用Flexbox，您使用的flex grow值在

main

侧比

侧大得多

这样，
侧
将在包装时填充父级，而在宽屏上，
主
上的值要高得多，
侧
上的弹性增长实际上将是零

再加上
main
上的
minwidth
是
侧边的两倍，它将在变小之前进行包裹，为此，我们可以使用百分比，因为它基于父级宽度

因此，在这种情况下，
main
上的两倍大小将是父项的2/3，即66.666%


堆栈片段


.container flex{
显示器：flex；
柔性包装：包装；
}
梅因先生{
弹性：10000；
最小宽度：66.666%；
背景：浅蓝色；
}
.这边{
弹性：10自动；
背景：浅绿色；
}
跨度{
显示：内联块；
填充：20px；
}

填充剩余物，至少为“侧边”的两倍
获取内容大小
在我看来是一个完美的解决方案。。。。我不能完全理解你的评论come@vals谢谢将改变这一部分，就像你这样说听起来很奇怪：）@vals我想象“我能来的最近的”部分，因为它似乎有点老套：将flex增长设置为任意大的数字。但它看起来可能会起作用，所以我愿意试一试。@chharvey是的，没错。原因是需要在
侧将
flex grow
设置为
1
，否则它在包装时不会填充父级，但在打开包装时，
main
上的
flex grow
需要足够大，因此在计算内容减少后剩余的空间时，
main
必须占用所有空间，否则，
端也会增长一些。因此，从技术上讲，
side
将获得剩余空间的1/10001，
main
将获得10000/10001，这就是为什么我说的最接近：）@LGSon-你的逻辑是完美的；我只是在写CSS时通常不这么想。CSS中通常有一个属性或值，在大多数情况下，它完全符合我的要求。这就是为什么我称你的方法有点“hacky”。但它解决了问题，所以我将它标记为解决方案，直到更好的方法出现！（FTR，我使用999999，因为它更高，更容易输入。）
.container-grid {
  display: grid;
  grid-template-columns: 1fr 15em;
}
@media screen and (max-width: 45em) {
  .container-grid {
    grid-template-columns: 1fr;
  }
}