子内容忽略父网格定义的适合内容宽度

Question

我有一个与display: grid一起使用的卡片组件，我定义了 2 列fit-content(135px) 1fr 。 在第一列（最大应为 135px）上，我有一个组件有一个不适合列宽的子元素，并使该列更宽 go。

我已经尝试通过放置min-width: 0和max-width: 100%以及所有可能的组合来设置导致问题的子节点。 我找到的唯一可行的解决方案是为子节点设置max-width ，但这会破坏应用程序上的组件样式。

我错过了什么？

这是我的 css 代码：

.grid {
    grid-template-columns: fit-content(135px) 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "selector title"
        "selector ."
 }

 .child {
     grid-area: selector;
 }

Answer 1

尝试这个：

grid-template-columns: repeat(minmax(135px,1fr) 1fr);

Answer 2

我试图使网格列宽度适合内容行。 但这是不可能的。 列宽可能是min-content或max-content以使用大文本或小文本作为最小宽度。

 .wrapper { display: grid; grid-template-columns: max-content; grid-template-rows: auto; grid-template-areas: "a" "b"; }.item1 { grid-area: a; grid-column: 10px; border: 1px solid; }.item2 { grid-area: b; border: 1px solid; }

 <div class="wrapper"> <div class="item1 x">Item1-----------</div> <div class="item2 x">Item2</div> </div>