网格项目不随内部内容高度扩展

Question

我有一个菜单网格布局，其中有一个内部项目（在本例中是 .metadata div），我想将其展开并向下推另一个项目。请参阅此处的示例：

.wrapper {
  display: grid;
  grid-column-gap: 8px;
  grid-row-gap: 4px;
  grid-template-columns: 48px minmax(0px, 3fr) 1fr;
  grid-template-rows: 24px 20px 44px;
  grid-template-areas:
    "icon title action-bar"
    "icon metadata action-bar"
    "tabs .... bottom-right";
  padding: 16px 16px 0 16px;
}

.metadata {
  grid-area: metadata;
  display: flex;
  align-items: baseline;
  direction: ltr;
}

.innterTest {
  height: 100px;
  background-color: red;
}

.metadataItem {
  display: flex;
}

.tabs {
  grid-area: tabs;
  grid-column-end: 3;
  padding-top: 4px;
}

<div class="wrapper">
  <div class="icon">icon
  </div>
  <div class="title">TITLE
  </div>
  <div class="action-bar">action bar
  </div>
  <div class="metadata">
    <div class="metadataItem">
      data node 1
      <div class="innterTest">
      testing
      </div>
    </div>
     <div class="metadataItem">
      data node 2
    </div>
     <div class="metadataItem">
      data node 3
    </div>
     <div class="metadataItem">
      data node 4
    </div>
    
  </div>
  <div class="tabs">tabs
  </div>
</div>

https://jsfiddle.net/c8wx2bgn/

如果您检查外部 .metadata 包装 div，它似乎保持小尺寸。我想要发生的是它展开并下推 .tabs 网格项。总体网格布局一直如我所愿，但我在元数据中添加了更多项目，并希望它在扩展时将选项卡向下推。

我已经尝试在元数据和元数据 div 上强制执行高度，但这似乎不会影响布局。网格新手，所以不确定我在这里遗漏了什么。

Answer 1

您有 grid-template-rows: 24px 20px 44px.

这意味着包含您的 metadata div 的第二行的高度限制为 20 像素。

试试这个：grid-template-rows: 24px auto 44px.

网格项目不随内部内容高度扩展

Grid item not expanding with inner content height

css

css-grid