0

I'm trying to render the table full width and full height:

html:

<div class="container">
     <div styleName="child-cont">
       <div>name 1 </div>
       <div> name 2</div>
  </div>
</div>

css:

 .container {
  flex-direction: column;
  display: flex;
  flex: 1;
  overflow-y: hidden;

}
.child-cont {
flex: 1;
}

my table gets squished when using the above. it has multiple rows but only 1 gets rendered and the others get a scrollbar. looks something like:

enter image description here

is there any way i could get this table rendered full height, tried height: 100%; on parent and child container, but no luck. I'm unable to remove the prop "flex" from the parent as it is used by other sections of the app, is there an alternative to "flex" that would take up as much space as the flex:1 would take? any ideas ? Thanks!

user1234
  • 3,000
  • 4
  • 50
  • 102
  • http://stackoverflow.com/a/31728799/3597276 – Michael Benjamin Dec 07 '16 at 03:56
  • Without more information it's hard to say what all might be needed. Specifically, what is the `.container` supposed to be 100% height *of* and how is that container's height set? A working demo in codepen.io or jsbin.com might help. If you want the .container to be 100% of the window, you could try `100vh`. It's possible a `min-height` on it would help as well. Michael_B's link has other more general info. – alexbea Dec 07 '16 at 15:05

0 Answers0