div inside flex button with 100% height

Question

100% height of elements inside a flexbox div works OK : http://codepen.io/chriscoyier/pen/raGKwM

But it doesn't seem to work with buttons : http://codepen.io/anon/pen/YqNXpv

How can I fix this ?

<button class="flexbox">
  <div class="col"><p>bla</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
  <div class="col"><p>bla</p></div>
</button>

And CSS :

.flexbox {      
  display: -webkit-flex;        
  display: -ms-flexbox;     
  display: flex;
  overflow: hidden;
}
.flexbox .col {
  flex: 1;
  padding: 20px;
}
.flexbox .col:nth-child(1) { 
  background: #ccc; 
  -webkit-order: 1; 
      -ms-flex-order: 1; 
          order: 1;
}
.flexbox .col:nth-child(2) { 
  background: #eee;
  -webkit-order: 0;
      -ms-flex-order: 0;
          order: 0;
}
.flexbox .col:nth-child(3) { 
  background: #eee;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}

body {
  padding: 20px;
}