Remove redundant space at bottom when using Angular Flex with "row wrap" and grid-gap

Question

I'm using Angular Flex to align cards in a row. The cards should wrap into a new line if there are several of them. The relevant settings of the block are

fxLayout="row wrap" fxLayoutGap="40px grid"

fxLayoutGap uses paddings on the inner elements and a negative margin on the container so that the gap is also applied when the inner elements wrap to a new row. So I do not want to remove the grid setting (or the paddings or negative margins in the

In addition, the cards are grouped into blocks with a header and a line on the left. I've created a sample that mirrors the settings that Angular Flex applies. The image is taken from this sample:

As you can see, there is redundant space at the bottom of each group. I want the block and the line on the left to end where the last row of cards (of the block) ends:

You can find the sample on jsfiddle.

How can I adjust the CSS and/or the Angular Flex settings to remove the redundant space and make the line end at the last row of cards while preserving the space between the blocks?

Answer 1

remove the padding-bottom from the last two elements:

#outer {
  border-left: 2px solid red;
  padding-left: 0px;
  padding-bottom: 40px;
}

#outer:not(:first-child) {
  margin-top: 40px; 
}

#header {
  padding: 10px;
  margin: 0px 0px 40px 0px;
  background-color: red;
}

#container {
  margin: 40px -40px -40px 40px;
  display: flex;
  flex-flow: row wrap;
  box-sizing: border-box;
}

#inner {
  padding: 0px 40px 40px 0px;
  flex: 0 0 50%;
  box-sizing: border-box;
  max-width: 50%;
  min-width: 50%;
}
/* added */
#inner:last-child,
#inner:nth-last-child(2):nth-child(odd){
   padding-bottom:0;
}
/**/

#card {
  background-color: green;
}

<div id="outer">
  <div id="header">
    HEADER
  </div>
  <div id="container">
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
  </div>  
</div>
<div id="outer">
  <div id="header">
    HEADER
  </div>
  <div id="container">
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
  </div>  
</div>


<div id="outer">
  <div id="header">
    HEADER
  </div>
  <div id="container">
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
  </div>  
</div>

<div id="outer">
  <div id="header">
    HEADER
  </div>
  <div id="container">
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
  </div>  
</div>