Display flex is overriding display grid layout

Question

I'm having trouble with my display grid layout when I include a display flex layout within it.

In my first example, I have my grid layout as I would like it. It is divided into 5 columns, the header takes up 100%, the footer 100%, and between them I have a filter element taking 20%, an items element taking 60%, and an aside element taking the other 20%. This works great.

However, in my seconds example, I've added a flex item within the items grid. When I do this, the filter and the aside elements no longer retain the intended 20%, and the items element becomes much larger. It seems as if the display flex is overriding the display grid. I assume that this happens because both the display grid and display flex elements are taken out of the normal document flow.

So my question is, how do I use the display flex element with my grid's items element without losing the grid's intended layout (filter-20% items-60% aside-20%)?

.header {
  grid-area: header;
  background-color: coral;
}

.filter {
  grid-area: filter;
  background-color: aquamarine;
}

.items {
  grid-area: items;
  background-color: lightskyblue;
}

.aside {
  grid-area: aside;
  background-color: palegreen;
}

.footer {
  grid-area: footer;
  background-color: palevioletred;
}

.gridContainer {
  display: grid;
  grid-template-areas: "header header header header header" "filter items items items aside" "footer footer footer footer footer";
}

.gridContainer>div {
  padding: 20px;
}

.flexContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.flexItem {
  background-color: beige;
  margin: 0px 0px 20px 0px;
}

Example 1:
<div class="gridContainer">
  <div class="header">header</div>
  <div class="filter">filter</div>
  <div class="items">Items</div>
  <div class="aside">items</div>
  <div class="footer">footer</div>
</div>
<br /><br /><br /> Example 2:
<div class="gridContainer">
  <div class="header">header</div>
  <div class="filter">filter</div>
  <div class="items">
    <div class="flexContainer">
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>

    </div>
  </div>
  <div class="aside">items</div>
  <div class="footer">footer</div>
</div>

Answer 1

You need to define those percentage or by default the content will define the width. Simply make each column to be 1fr to have the needed result:

.header {
  grid-area: header;
  background-color: coral;
}

.filter {
  grid-area: filter;
  background-color: aquamarine;
}

.items {
  grid-area: items;
  background-color: lightskyblue;
}

.aside {
  grid-area: aside;
  background-color: palegreen;
}

.footer {
  grid-area: footer;
  background-color: palevioletred;
}

.gridContainer {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  grid-template-areas: 
    "header header header header header" 
    "filter items items items aside" 
    "footer footer footer footer footer";
}

.gridContainer>div {
  padding: 20px;
}

.flexContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.flexItem {
  background-color: beige;
  margin: 0px 0px 20px 0px;
}

Example 1:
<div class="gridContainer">
  <div class="header">header</div>
  <div class="filter">filter</div>
  <div class="items">Items</div>
  <div class="aside">items</div>
  <div class="footer">footer</div>
</div>
<br /><br /><br /> Example 2:
<div class="gridContainer">
  <div class="header">header</div>
  <div class="filter">filter</div>
  <div class="items">
    <div class="flexContainer">
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>

    </div>
  </div>
  <div class="aside">items</div>
  <div class="footer">footer</div>
</div>