title: How to reset 'display' property for flex-item
body: <p>I'm trying to convert old layout based on tables and JS to the new Flexbox with backward compatibility by keeping the tables for old browsers (specifically IE8, IE9 and Opera 10+).</p>
  
  <p>The problem is that there is no <code>display:flex-item</code> to override the old style of <code>display:table-cell</code>.</p>
  
  <p>I've tried various definitions like <code>display:inherit</code>, <code>display:initial</code> but none is able to reset the display definition to work correctly as flex-item.</p>
  
  <pre><code>&lt;!-- HTML user list --&gt;
  &lt;div class="userDetails layout"&gt;
      &lt;div class="picture"&gt;&lt;img src="..."&gt;&lt;/div&gt;
      &lt;div class="details"&gt;username, email, etc.&lt;/div&gt;
  &lt;/div&gt;
  
  /* CSS Table Layout */
  .layout { display: table; width: 100%; }
  .layout &gt; .picture { display: table-cell; width: 30%; }
  .layout &gt; .details { display: table-cell; width: auto; }
  
  /* CSS Flexbox - ignored by browsers that does not support it */
  /* just an example - should use all versions for best compatibility */
  .layout { display: flex; }
  .layout &gt; .picture { display: ???; flex: 0 1 30%; }
  .layout &gt; .details { display: ???; flex: 1 1 auto; }
  </code></pre>
  
  <p>Whatever I set in display for the <code>.details</code> it does not work as flex-item and does not <em>grow</em> to fill the remaining space.</p>
  
  <p>Any idea how to override this without using JS to detect browser version and switch the styles?</p>
  
  <p><em>I've tried googling for solution but most of the results are just general articles about Flexbox; only similar is <a href="http://benfrain.com/css-performance-test-flexbox-v-css-table-fight/" rel="noreferrer">this test</a> which simply does not solve the backward compatility.</em></p>
  
  <p>UPDATE 1:
  This is a <a href="http://jsfiddle.net/nothrem/do525ff3/2/" rel="noreferrer">JSFiddle demo</a> of a pure Flexbox and Flexbox combined with table layout. If you resize the result window, the pure layout shrinks differently than the bottom one that combine table and Flexbox.
  Note: in Chrome this works correctly, try it in Firefox, IE, Safari, etc.</p>
  
  <p>UPDATE 2:
  Safari works correctly with prefixed definitions... <a href="http://jsfiddle.net/nothrem/do525ff3/2/" rel="noreferrer">updated JSFiddle demo</a></p>