Flexbox with non block children

Flexbox-with-non-block-children.markdown

Flexbox with non block children

I've run into an inconsistency in IE 10 support and flexbox. Is it just a fact that I need to make sure children of flexbox are display block?

This pen works as expected in webkit browsers and IE11. In IE10 however the flex:1; style on the .flex-child-label class seems to be ignored. If i make the .flex-child-label class be display:block it works as expected.

A Pen by Dave Staab on CodePen.

License.

index.html

<div class="container">
  <div class="flex-parent">
    <span class="flex-child-label">Inbox</span>
    <span class="flex-child">1</span>
  </div>
  <div class="flex-parent">
    <span class="flex-child-label">Sent</span>
    <span class="flex-child">2</span>
  </div>
  <div class="flex-parent">
    <span class="flex-child-label">More</span>
    <span class="flex-child">3</span>
  </div>
<div>

style.css

.container {
  width: 300px;
  background-color: lightgray;
  color: #555555;
}

.flex-parent {
  display: flex;
  padding: 15px;
  border-top: thin solid black;
  border-bottom: thin solid black;
  flex-direction: row;
  flex-wrap: nowrap;
  
}

.flex-child {
  flex: 0;
  padding: 0 20px;
  text-align: center;
}
.flex-child-label {
  flex: 1;
  /* have to add this to get it to work correctly in IE10 */
  /*display:block;*/
}