flex property messes with button height?

Question

I'm using bootstrap and making a layout with flex.

Currently the button is taking the height of the container. There is an awful lot of space under the text and i want to remove i and when I add padding to the button its becomes uneven in size. I tried to adjust the size by line height but i trying to find the actual solution and the reason as to why i'm having this problem.

Anything that i'm missing here with flex or is it something else? Any help will be highly appreciated. Thanks.

.vessel-card {
  display: flex;
  flex-direction: column;
}
.vessel-card h3 {
  margin: 0;
  padding: 20px 0;
}
.departure-card {
  display: flex;
  padding: 20px 0;
  border-top: 2px solid #888;
}
.departure-card p {
  margin-right: 10px;
}
.departure-card:last-child {
  border-bottom: 2px solid #888;
}
.departure-card .btn-explore {
  border: 1px solid #000;
  display: inline-block;
  text-transform: uppercase;
  color: #000;
  border-radius: 0;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-4 vessel-card">
      <a href="cienfuegos-from-havana.html" class="special-departure">
        <img src="http://placehold.it/350x150">
      </a>
      <h3>Vessel: Panorama</h3>
      <div class="departure-card">
        <p>Havana to Cienfuegos starting at $5,999</p>
        <a href="#" class="btn btn-explore">Explore</a>
      </div>
      <div class="departure-card">
        <p>Havana to Cienfuegos starting at $5,999</p>
        <a href="cienfuegos-from-havana.html" class="btn btn-explore">Explore</a>
      </div>
    </div>
  </div>
</div>

Solution 1

Flexbox make items same height as you can see here Demo , but you can use align-items to change that or in your case Demo

.parent {
  align-items: center;
  display: flex;
}

.child {
  border: 1px solid black;
  margin: 5px;
}

.child:first-child {
  height: 100px;
}

<div class="parent">
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

Solution 2

There are two possible solutions

1. d-flex with align-items-* can help you.

<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex justify-content-center align-items-center bg-info" style="height: 160px;">
  <button class="btn btn-success">align-items-* saved me :)</button>
</div>

2. No css required, just wrap the button with span or div

<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex justify-content-around bg-info" style="height: 160px;">
  <span>
    <button class="btn btn-success">span or div saved me :)</button>
  </span>
 
  <button class="btn btn-danger">Aw, flex infected me ;(</button>
</div>

Solution 3

This is a simpler solution. This solution aligns the button to the center horizontally and does not mess with the height of the button or other child elements.

.parent {
  display: flex;
  align-items: center;
}