CODEWITHSUNDEEP
htmlcssflexbox
Mike Borozdin
Mike Borozdin

Reputation: 1188

CSS Height:100% not working on Table inside Flexbox Child

I have a CSS table inside a flexbox child. The height of that table is set to 100%, but it doesn't work.

You can see in the Codepen that the greenbox is only stretched horizontally, but not vertically.

I've seen the similar question. However, once I place a CSS table inside a flexbox child it also stops working.

Interestingly, the problem affects Chrome, but not IE11.

CodePen

HTML:

<div class="flex-box">
  <div class="flex-child">
    <div class="wrapper">
      <div class="table">
        <div class="table-cell">
          Hello
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.flex-box {
  width: 500px;
  height: 500px;
  background-color: lightblue;
  display: flex;
}

.flex-child {
  flex-grow: 1;
}

.wrapper {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

.table {
  height: 100%;
  width: 100%;
}

.table-cell {
  height: 100%;
  width: 100%;
  background-color: green;
  text-align: center;
}

Upvotes: 5

Views: 4603

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371839

You're missing a height declaration on a parent element.

Try this:

.flex-child {
     flex-grow: 1;
     height: 100%;   /* NEW */
}

Revised Codepen

When it comes to rendering percentage heights in flexbox, there are differences in behavior among browsers. In particular Firefox/IE vs Chrome/Safari/Opera. For details see this post:

Also, as a general CSS rule, for percentage height to work on a child element, the height property must be defined on the parent. More details here:

Upvotes: 3

Related Questions