4

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;
}
Community
  • 1
  • 1
Mike Borozdin
  • 1,138
  • 3
  • 14
  • 32

1 Answers1

2

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:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Hi @Michael_B, thanks! That worked, however, my real use case involves at least two flexbox child. The problem is if both of them have `height: 100%`, then it would increase the overall height twice. If the container has the height of 200px, then it would become 400px. See http://codepen.io/anon/pen/yOJyOY. Okay, I can just reduce the height to 50%. But I'm trying to make it flexible for a case when I switch `flex-direction` to `row`. If I do that with `height: 50%', then it wouldn't occupy the entire height of a parent element. – Mike Borozdin Mar 10 '16 at 11:49
  • You could use a media query to adjust the `flex-direction` and `height` depending on screen size. Here's a revised codepen (widen/narrow browser window for effect): http://codepen.io/anon/pen/zqWKav?editors=1100 – Michael Benjamin Apr 13 '16 at 14:08