How should I set the height of this div element to make it responsive?

Question

I have a problem with my CSS code. I want it to be responsive but whenever I set height property of .menu-button I get this problem:

After using % height

And before I use it, everything works just fine.

Before using % height

I appreciate any help. I'm new to CSS so I probably made some mistakes in the code.

.menu-button {
  width: 20%;
  height: 6rem;
  position: relative;
  overflow: hidden;
  border: 1px solid #000000;
  background-color: rgba(110, 0, 0, 0.5);
  display: inline-block;
  margin: 1.5em;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

<div id="mainmenu">
  <div class="row">
    <div id="job" class="menu-button">
      <div class="job-icon"></div>
    </div>
    <div id="inventory" class="menu-button">
      <div class="inventory-icon"></div>
    </div>
    <div id="animations" class="menu-button">
      <div class="animations-icon"></div>
    </div>
  </div>
  <div class="row">
    <div id="accesories" class="menu-button">
      <div class="accesories-icon"></div>
    </div>
    <div id="interactions" class="menu-button">
      <div class="interactions-icon"></div>
    </div>
    <div id="horse" class="menu-button">
      <div class="horse-icon"></div>
    </div>
  </div>
  <h1>Panel postaci</h1>
</div>

Answer 1

with css grid, something like this:

.fixed-height-container {
  height: 300px; /* container height for demonstration */
}

.grid {
  display:               grid;
  grid-gap:              1.5em;
  grid-template-columns: repeat(3, 1fr); /* three columns, diveded equaly */
  grid-template-rows:    repeat(2, 1fr); /* two rows, diveded equaly */
  width:                 60%;
  height:                100%;
}

.menu-button {
  width:            100%;
  height:           100%;
  position:         relative;
  overflow:         hidden;
  border:           1px solid #000000;
  background-color: rgba(110, 0, 0, 0.5);
  display:          inline-block;
}

<div class="fixed-height-container">
  
  <div class="grid">

    <div id="job" class="menu-button">
      <div class="job-icon"></div>
    </div>
  
    <div id="inventory" class="menu-button">
      <div class="inventory-icon"></div>
    </div>
  
    <div id="animations" class="menu-button">
      <div class="animations-icon"></div>
    </div>
  

    <div id="accesories" class="menu-button">
      <div class="accesories-icon"></div>
    </div>
  
    <div id="interactions" class="menu-button">
      <div class="interactions-icon"></div>
    </div>
  
    <div id="horse" class="menu-button">
      <div class="horse-icon"></div>
    </div>
    
  </div>
  
</div>