Flex display gives auto height to a button

Question

I have a parent div, and inside it, a <h1> and a <button>. I float them with justify content-between. Because, the parent div has a d-flex class, the button will have the same height, as this parent div.

How can i solve that? For the button, i just need some padding only.

They dont have any css, only just some color and background color..

<div class="row">
    <div class="col-12 d-flex justify-content-between">
        <h1 class="page_title mb-4">Vélemények</h1>
        <span class="btn velemeny_btn"><i class="fa fa-user-edit mr-1"></i> Vélemény írása</span>
    </div>
    <div class="col">
        <div class="content"></div>
    </div>
</div>

You should provide enough code to reproduce the issue, without it you are making it harder to provide an answer and help you. — Apolo, Nov 27 '20 at 17:09

score 1 · Answer 1 · answered Nov 27 '20 at 17:13

You have to add align-self-start to the span to avoid the stretch effect.

.velemeny_btn {
  background: red;
}

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

<div class="row">
    <div class="col-12 d-flex justify-content-between">
        <h1 class="page_title mb-4">Vélemények</h1>
        <span class="btn velemeny_btn align-self-start"><i class="fa fa-user-edit mr-1"></i> Vélemény írása</span>
    </div>
    <div class="col">
        <div class="content"></div>
    </div>
</div>

score 0 · Answer 2 · answered Nov 27 '20 at 17:20

You can use bootstrap class: align-items-baseline to perform horizontal alignment

<div class="row">
   <div class="col-12 d-flex justify-content-between align-items-baseline">
      <h1 class="page_title mb-4">Vélemények</h1>
      <button class="btn btn-primary">Test</button>
   </div>
  <div class="col">
     <div class="content"></div>
  </div>
</div>

Learn more about Flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flex display gives auto height to a button

2 Answers2