search

philipwalton / flexbugs

A community-curated list of flexbox issues and cross-browser workarounds for them.
MIT License
13.63k stars 495 forks source link

flex button child height not accepting 100 percent #282

Open nirvparekh opened 4 years ago

nirvparekh commented 4 years ago

I am having following html markup

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

and css applied:

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

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>

eddsaura commented 4 years ago

Why don't you just write on the contrary?

<div><button/></div>

Is there a reason?

Thanks for sharing