Button is adjusting to it's container and can't make it smaller

Question

I want to make the button smaller, specially vertically, but I can't, I think it is because it's adjusting to the parent and the font size.

Here is an example recreating my problem

.justify-between {
    justify-content: space-between;
}

.flex-row {
    flex-direction: row;
}
.flex {
     display: flex;
}

.text-4xl {
    font-size: 2.25rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.mr-2 {
    margin-right: 0.5rem;
}
.text-2xl {
   font-size: 1.5rem;
}
.rounded-lg {
   border-radius: 0.5rem;
}

.blue {
  background: blue;
}

<div class="flex flex-row justify-between blue">
  <h1 class="text-4xl">title</h1>
   <button class="px-6 py-2 rounded-lg text-2xl mr-2">
     Show
   </button>
</div>

How can I do this?

score 4 · Accepted Answer · answered Aug 05 '20 at 16:56

Because display: flex has align-items: stretch as default.

Add align-items:center to .flex or align-self: center to button

.justify-between {
  justify-content: space-between;
}

.flex-row {
  flex-direction: row;
}

.flex {
  display: flex;
  /* added */
  align-items: center;
}

.text-4xl {
  font-size: 2.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.text-2xl {
  font-size: 1.5rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.blue {
  background: blue;
}

<div class="flex flex-row justify-between blue">
  <h1 class="text-4xl">title</h1>
  <button class="px-6 py-2 rounded-lg text-2xl mr-2">
     Show
   </button>
</div>

Button is adjusting to it's container and can't make it smaller

1 Answers1