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

As Danield has mentioned, all children of a flex container (designated by display: flex or display: inline-flex) are automatically made flex items. There is no display property for a flex item; instead, you set it to some other value depending on how you want the children of the flex item to be laid out. If browsers are recognizing display: flex-item, then they probably have some weird non-standard implementation of "flexbox", because that value has never existed in any incarnation of the Flexbox spec (and I have no idea what exactly it would correspond to if it did).

The initial value of display is inline, so display: initial is equivalent to display: inline. See this answer. What you're trying to do is reset the elements to whatever their default display is as given by browsers. You will need to know this value in advance; for div elements it's display: block.

Unfortunately, this will override the existing table-cell declaration in all browsers, for obvious reasons. In that case, you might as well just stick with the table layout if it already works for you, if you need to support browsers that don't support flexbox.

Answer 2

.child {
  flex-shrink: 0;
}

add flex-shrink property to prevent shrinking more than its content

Answer 3

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;
}

<div class="layout">
  <div class="picture">
    <img src="...">
  </div>
  <div class="details">username, email, etc.</div>
</div>