title: Bug with iOS render of display: flex?
body: <p>I'm using HTML5 display and summary elements.  I'm using a custom marker as a ::before pseudo element.  The summary element can contain up to 2 span elements.</p>
  
  <p>I've applied a display: flex (or display: inline-flex) rule to the summary element.</p>
  
  <p>FF and chrome render the summary element exactly as expected - a single line and I have control of the width of the pseudo and span elements with flex.</p>
  
  <p>But when viewed on my iPad or iPhone the summary element gets rendered as if it were a block or flex-direction: column.  The pseudo element and each span gets rendered onto a new line.</p>
  
  <p>I have very similar code applied to divs with the same span elements but with an empty pseudo element.  iOS renders as expected in this instance (flex-direction: row).</p>
  
  <p>I'm not clear what's causing this behaviour and it's difficult for me to debug because I've not got an iOS device with which to develop.</p>
  
  <pre><code>&lt;details&gt;
   &lt;summary&gt;
    &lt;span&gt;content&lt;/span&gt;
    &lt;span&gt;content&lt;/span&gt;
   &lt;/summary&gt;
  &lt;/details&gt;
  </code></pre>
  
  <p>SCSS</p>
  
  <p>I'm using mixins with all the vendor prefixes. I'll not clutter this up with those!</p>
  
  <pre><code>details {
   display: flex;
   flex-direction: column;
   &amp;[open] &gt; summary::before {
    content: '\e313';
   }
  }
  
  summary {
   display: flex; //or could be inline-flex
   flex-direction: row; //not strictly needed since this is the default
   &amp;::before {
    content: '\315';
    flex: 0 0 $MARGIN;
    cursor: pointer;
   }
  }
  </code></pre>
  
  <p>The following renders correctly in iOS</p>
  
  <pre><code>div {
   display: flex; 
   flex-direction: row; 
   &amp;::before {
    content: '';
    flex: 0 0 $MARGIN;
    cursor: pointer;
   }
  }
  </code></pre>
  
  <p>Output
  FF &amp; chrome (renders details/summary as a row)</p>
  
  <p>marker  content  content</p>
  
  <p>iOS (renders details/summary as a column)</p>
  
  <p>marker</p>
  
  <p>content</p>
  
  <p>content</p>