[RaisedButton] whitespace around while using flexbox for parent div and child height is bigger than btn

[liesislukas]

Problem description

I had this issue many times while using buttons:

solution is dead simple, just wrap button with extra div and it's solved. I think it would be nice if that extra div would be just inside component and there would be no need to wrap.

Steps to reproduce

<div style={{display: 'flex'}}>
  <div style={{height: 70}}>

  </div>
  <RaisedButton primary={true} label={'hi'}/>
</div>

SOLUTION - add extra div around RaisedButton:

<div style={{display: 'flex'}}>
  <div style={{height: 70}}>

  </div>
  <div>
    <RaisedButton primary={true} label={'hi'}/>
  </div>
</div>

Versions

• Material-UI: 0.15.0
• React: 15.1.0
• Browser: Chrome: Version 51.0.2704.84 (64-bit)

[gausie]

Also experiencing this bug (with 0.15.2). Thanks for the workaround.

[aahan96]

@liesislukas That's how components have been written. However, now an error is showed if a RaisedButton is used outside of a div