CSS div равна высоте на основе минимальной высоты div

Основываясь на описании того, как вы хотите сделать макет, я бы предположил следующее:

• высота #mybuttons определяется исключительно высотой текстового содержимого в в левом столбце
• содержимое в правом столбце не должно определять высоту его родительского элемента, а просто позволяет его содержимому заключаться в подколонки при необходимости

Если это требуемый макет, вы может просто обернуть все содержимое в правом столбце в другой <div>, который расположен абсолютно, чтобы занять всю область, выделенную для правого столбца. Это приводит к тому, что все содержимое выводится из потока, что означает, что они больше не влияют на высоту #mybuttons.

Это будет выглядеть примерно так:

<div id="mybuttons" class="gray-inner-block buttons buttonsout">
  <div class="inner-block left-block">
    <!-- Left block content here -->
  </div>
  <div class="inner-block right-block">
    <!-- The div below is to be absolutely positioned relative to its parent -->
    <div class="right-block-content">
      <!-- Right block content here -->
    </div>
  </div>
</div>

Имея это в виду, вы можете затем переместить все стили Flexbox, первоначально примененные к .right-block, в .right-block-content, и это должно работать: [1115 ]

.gray-inner-block {
  margin-top: 40px;
  background-color: #f2f2f2;
  padding: 40px;
}

#mybuttons {
  display: flex;
}

#mybuttons .inner-block {
  width: 50%;
}

#mybuttons .right-block {
  position: relative;
}

#mybuttons .right-block-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#mybuttons .right-block-content div {
  width: 150px;
  height: 40px;
  margin-bottom: 10px;
  flex-basis: 0;
}

.inner-block .maintitle {
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.inner-block .subtitle {
  font-size: 20px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div id="mybuttons" class="gray-inner-block buttons buttonsout">
  <div class="inner-block left-block">
    <div class="maintitle">Use these buttons to maipulate the interface</div>
    <div class="subtitle">Each button can be use independently</div>
  </div>
  <div class="inner-block right-block">
    <div class="right-block-content">
      <div>
        <a class="btn btn-primary" role="button">Bouton 1</a>
      </div>
      <div>
        <a class="btn btn-primary" role="button">Bouton 2</a>
      </div>

      <div>
        <a class="btn btn-primary" role="button">Bouton 3</a>
      </div>

      <div>
        <a class="btn btn-primary" role="button">Bouton 4</a>
      </div>
      <div>
        <a class="btn btn-primary" role="button">Bouton 5</a>
      </div>
    </div>
  </div>
</div>

Попробуйте использовать этот CSS (добавлены медиа-запросы):

.gray-inner-block {
    margin-top: 40px;
    background-color: #f2f2f2;
    padding: 40px;
}  
#mybuttons {
    display: flex;
}
#mybuttons .inner-block {
    width: 50%;
}
#mybuttons .right-block {
    margin-left: 50px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 150px;
}
#mybuttons .right-block div {
    width: 150px;
    height: 40px;
    margin-bottom: 8px;
    flex-basis: 0;
}
.inner-block .maintitle {
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.inner-block .subtitle {
    font-size: 20px;
}

@media only screen and (max-width:670px){
    #mybuttons .right-block {
        height: 1500px;
    }
    #mybuttons .right-block div {
        margin: 0 0 20px 50px;
    }
}

Просто нужно отрегулировать высоту, и я думаю, что она работает просто отлично.

Если вы используете flex, то вам нужна высота для работы flex-wrap. Другой способ - добавить ширину столбца column-width: 153px; в #mybuttons .right-block. Отрегулируйте ширину в соответствии с вашими требованиями. Благодарю.