How to reset 'display' property for flex-item

Question

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 1

Answer 1

There is no display:flex-item because once you set display:flex on a container element, the children are automatically flex items.

Here is a demo to show that the display:table-cell on the children does not effect the functionality of the flex properties on the children

Edit: For Firefox and IE if you add the rule display:flex after the display:table-cell rule then the display:table-cell on the children does not effect the functionality of the flex properties on the children

/* flex layout with display:table falllback */

.layout {
  display: table; /* falllback */
  width: 100%; /* falllback */
  display: flex;
}

.layout > .picture {
  display: table-cell; /* falllback */
  width: 30%; /* falllback */
  display:flex; /* to make FF and IE happy */
  flex: 0 1 30%;
  background: tomato;
}

.layout > .details {
  display: table-cell; /* falllback */
  width: auto; /* falllback */
  display:flex; /* to make FF and IE happy */
  flex: 1 1 auto;
  background: aqua;
}

  

    
  
  
username, email, etc.