child node of flexbox button not applying height in percentage

Question

I am having following code

.flex {
  display: flex;
  width: 100%;
  height: 48px;
  background: black;
  flex-direction: row
}
.flex-item {
  height: 100%;
  background: grey
}

<button class="flex">
  <div class="flex-item">
    Click Me
  </div>
</button>

The problem is, parent node is <button> with flex-direction: row, child element does not accept height in percentage. height in percentage only works if parent node is <div>

Why you want `height: 100%`? Even if you want `height: 100%` then you should inherit the height rather than specify 100% using `height: inherit` — Shiladitya, May 09 '20 at 06:14
Do not forget that some elements by default have margin & padding + button has border — Air, May 09 '20 at 06:15
@Shiladitya awesome, how did this not come in my mind... thanks... — NIRAV PAREKH, May 11 '20 at 08:57

Air · Answer 1 · 2020-05-09T07:00:57.703

* {
  margin: 0;
  padding: 0;
}

.flex {
  display: flex;
  width: 100%;
  height: 48px;
  background: black;
  flex-direction: row;
  border: none;
}

.flex-item {
  height: 100%;
  background: grey;
}

<button class="flex">
  <div class="flex-item">
    Click Me
  </div>
</button>

but if you work with flex, it is better to use its functionality to add to the parent align-items: stretch;

* {
  margin: 0;
  padding: 0;
}

.flex {
  display: flex;
  width: 100%;
  height: 48px;
  background: black;
  flex-direction: row;
  align-items: stretch;
  border: none;
}

.flex-item {
  background: grey;
}

<button class="flex">
  <div class="flex-item">
    Click Me
  </div>
</button>

This is not the solution. Click Me should get 100% of it's parent. which in your code not achieving. — NIRAV PAREKH, May 09 '20 at 16:26

child node of flexbox button not applying height in percentage

1 Answers1