Grid item not expanding with inner content height-CodePudding

I have a menu grid layout with an inner item (in this case it's the .metadata div) that I want to expand and push down another item. See example here :

.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 >
  <div >icon
  </div>
  <div >TITLE
  </div>
  <div >action bar
  </div>
  <div >
    <div >
      data node 1
      <div >
      testing
      </div>
    </div>
     <div >
      data node 2
    </div>
     <div >
      data node 3
    </div>
     <div >
      data node 4
    </div>
    
  </div>
  <div >tabs
  </div>
</div>

https://jsfiddle.net/c8wx2bgn/

If you inspect the outer .metadata wrapping div it seems to stay a small size. What I would like to happen is for it to expand and push down the .tabs grid item. The general grid layout has been working as I had hoped, but I've added more items inside metadata and want it to push tabs down when it expands.

I've tried enforcing a height on the metadata and metadata divs but this does not seem to effect the layout. New to grid so unsure what I am missing here.

CodePudding user response：

You have grid-template-rows: 24px 20px 44px.

This means that the second row, which contains your metadata div, is limited in height to 20px.

Try this: grid-template-rows: 24px auto 44px.