Свойство flex портит высоту кнопки?

Я использую bootstrap и делаю макет с помощью flex.

В настоящее время кнопка принимает высоту контейнера. Под текстом очень много места, и я хочу удалить его, и когда я добавляю отступ к кнопке, размер становится неравномерным. Я пытался отрегулировать размер по высоте строки, но я пытался найти реальное решение и причину, по которой у меня возникла эта проблема.

Что-то, что мне не хватает здесь с flex или это что-то еще? Любая помощь будет высоко оценена. Благодаря.

.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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'; return false;" 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>

Ответ 1

Flexbox сделать те же height, что и здесь, Demo, но вы можете используйте align-items, чтобы изменить это или в вашем случае 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>

Ответ 2

Есть два возможных решения

1. d-flex с align-items-* может помочь вам.

<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>

Ответ 3

Вам нужно включить кнопку в параграф. Я также добавил padding к кнопке 5px, чтобы поле не было так близко к тексту, но значение можно изменить в соответствии с вашими потребностями или полностью удалить, если это нежелательно.

.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;
  padding: 5px;
}

<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
          <a href="#" class="btn btn-explore">Explore</p></a>
      </div>
      <div class="departure-card">
        <p>Havana to Cienfuegos starting at $5,999
          <a href="cienfuegos-from-havana.html" class="btn btn-explore">Explore</p></a>
      </div>
    </div>
  </div>
</div>