我有一个 flex 容器,有 2 个 child 。
其中一个设置为 flex-grow: 1
,以占用尽可能多的空间。
另一个 child 不适合它的内容(我试过 flex-shrink: 0
),内容是一个 CSS 网格。
我怎样才能让两个 child 都拥有各自内容的最小宽度,同时保持一个 child 占据尽可能多宽度的当前结构?
最佳答案
这种风格是错误的
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;
}
关于flex 元素内的 css 网格元素不会溢出容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49963959/