How to use margin collapse with flexbox in Bootstrap 4?

Question

In example below I'm trying to use margin collapse with bootstrap 4 and I expect 50px gap between button and column, but it is 100px by display: flex; set on the .row. How can I achieve margin collapse here?

.test-block {
  background: #FFDC00;
  border: 1px solid #111;
  margin-bottom: 50px;
  text-align: center;
}

.test-element.col-12 {
  background: #FF4136;
}

.button-block {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  color: white;
}

.btn-caption {
  color: #111;
}

* {
  text-align: center;
  color: #111;
}

.wrapper {
  margin-top: 30px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<h1>Bootstrap 4</h1>
<div class="row">
  <div class="col-12 col-sm-6 col-md-3 test-block">
    test block
  </div>
  <div class="col-12 col-sm-6 col-md-3 test-block">
    test block
  </div>
  <div class="col-12 col-sm-6 col-md-3 test-block">
    test block
  </div>
  <div class="col-12 col-sm-6 col-md-3 test-block">
    test block
  </div>
  <div class="col-12 button-block">
    <a class="btn btn-success">Button</a>
    <div class="btn-caption">Caption</div>
  </div>
</div>

<div class="wrapper">
  <h1>No Bootstrap</h1>
  <div class="test-block">
    test block
  </div>
  <div class="test-block">
    test block
  </div>
  <div class="test-block">
    test block
  </div>
  <div class="test-block">
    test block
  </div>
  <div class="button-block">
    <a class="btn btn-success">Button</a>
    <div class="btn-caption">Caption</div>
  </div>
</div>