<html>

    <head>

      <base href="https://bugs.webkit.org/" />

    </head>

    <body><table border="1" cellspacing="0" cellpadding="8">

        <tr>

          <th>Bug ID</th>

          <td><a class="bz_bug_link 

          bz_status_NEW "

   title="NEW - &lt;summary&gt; does not respect display: flex"

   href="https://bugs.webkit.org/show_bug.cgi?id=167111">167111</a>

          </td>

        </tr>

        <tr>

          <th>Summary</th>

          <td>&lt;summary&gt; does not respect display: flex

          </td>

        </tr>

        <tr>

          <th>Classification</th>

          <td>Unclassified

          </td>

        </tr>

        <tr>

          <th>Product</th>

          <td>WebKit

          </td>

        </tr>

        <tr>

          <th>Version</th>

          <td>Safari 10

          </td>

        </tr>

        <tr>

          <th>Hardware</th>

          <td>Unspecified

          </td>

        </tr>

        <tr>

          <th>OS</th>

          <td>Unspecified

          </td>

        </tr>

        <tr>

          <th>Status</th>

          <td>NEW

          </td>

        </tr>

        <tr>

          <th>Severity</th>

          <td>Normal

          </td>

        </tr>

        <tr>

          <th>Priority</th>

          <td>P2

          </td>

        </tr>

        <tr>

          <th>Component</th>

          <td>Layout and Rendering

          </td>

        </tr>

        <tr>

          <th>Assignee</th>

          <td>webkit-unassigned&#64;lists.webkit.org

          </td>

        </tr>

        <tr>

          <th>Reporter</th>

          <td>richardwa&#64;google.com

          </td>

        </tr>

        <tr>

          <th>CC</th>

          <td>bfulgham&#64;webkit.org, simon.fraser&#64;apple.com, zalan&#64;apple.com

          </td>

        </tr></table>

      <p>

        <div>

        <pre>Created <span class=""><a href="attachment.cgi?id=299020" name="attach_299020" title="Screenshot of the issue">attachment 299020</a> <a href="attachment.cgi?id=299020&amp;action=edit" title="Screenshot of the issue">[details]</a></span>

Screenshot of the issue

Applying display: flex; to a &lt;summary&gt; element doesn't render the children as flex items.

Instead they appear to render as if the &lt;summary&gt; element was display: block, the current default at time of writing.

HTML for reproduction:

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

  &lt;title&gt;&amp;lt;summary&amp;gt; flex demo&lt;/title&gt;

  &lt;style&gt;

    details {

      background: #eee;

    }

    summary {

      background: #dee;

    }

    h3 {

      background: #ede;

    }

    .foo {

      background: #eed;

    }

  &lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;h2&gt;No flex styles&lt;/h2&gt;

&lt;details&gt;

  &lt;summary&gt;

    &lt;h3&gt;Hello&lt;/h3&gt;

    &lt;div class=&quot;foo&quot;&gt;There&lt;/div&gt;

  &lt;/summary&gt;

  &lt;div&gt;Woah!&lt;/div&gt;

&lt;/details&gt;

&lt;h2&gt;&amp;lt;summary&amp;gt; as display: block;&lt;/h2&gt;

&lt;details&gt;

  &lt;summary style=&quot;display: block;&quot;&gt;

    &lt;h3&gt;Hello&lt;/h3&gt;

    &lt;div class=&quot;foo&quot;&gt;There&lt;/div&gt;

  &lt;/summary&gt;

  &lt;div&gt;Woah!&lt;/div&gt;

&lt;/details&gt;

&lt;h2&gt;&amp;lt;summary&amp;gt; as display: flex;&lt;/h2&gt;

&lt;details&gt;

  &lt;summary style=&quot;display: flex;&quot;&gt;

    &lt;h3 style=&quot;flex: 1 1 auto;&quot;&gt;Hello&lt;/h3&gt;

    &lt;div class=&quot;foo&quot; style=&quot;flex: 0 0 auto;&quot;&gt;There&lt;/div&gt;

  &lt;/summary&gt;

  &lt;div&gt;Woah!&lt;/div&gt;

&lt;/details&gt;

&lt;h2&gt;&amp;lt;div&amp;gt; inside &amp;lt;summary&amp;gt; as display: flex;&lt;/h2&gt;

&lt;details&gt;

  &lt;summary&gt;

    &lt;div style=&quot;display: flex;&quot;&gt;

      &lt;h3 style=&quot;flex: 1 1 auto;&quot;&gt;Hello&lt;/h3&gt;

      &lt;div class=&quot;foo&quot; style=&quot;flex: 0 0 auto;&quot;&gt;There&lt;/div&gt;

    &lt;/div&gt;

  &lt;/summary&gt;

  &lt;div&gt;Woah!&lt;/div&gt;

&lt;/details&gt;

&lt;/body&gt;

&lt;/html&gt;</pre>

        </div>

      </p>

      <hr>

      <span>You are receiving this mail because:</span>

      <ul>

          <li>You are the assignee for the bug.</li>

      </ul>

    </body>

</html>