flex 元素内的 css 网格元素不会溢出容器

Question

我有一个 flex 容器，有 2 个 child 。

其中一个设置为 flex-grow: 1，以占用尽可能多的空间。另一个 child 不适合它的内容(我试过 flex-shrink: 0)，内容是一个 CSS 网格。

我怎样才能让两个 child 都拥有各自内容的最小宽度，同时保持一个 child 占据尽可能多宽度的当前结构？

codepen

Answer 1

这种风格是错误的

ninja-manager .ninja-manager__not-active__inner {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-column-gap: 30px;
}

因为它为列提供了总宽度的 50%，而另一方面，您在列之间设置了间隙。您使用的总宽度大于可用宽度。

把它改成这样，你在考虑到间隙后使用可用空间的地方:

ninja-manager .ninja-manager__not-active__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px;
}

forked codepen