laggingreflex laggingreflex - 1 month ago 8
CSS Question

display flex doesn't work on summary tags in Chrome?

I have a

display: flex
on a
<summary>
tag with some child
<p>
elements. It should arrange them in a row, right? and it does, but only in Firefox. Not on Chrome (43.0.2357.81). Is it just me?



http://jsfiddle.net/laggingreflex/5e83uqf9/



summary {
display: flex;
flex-flow: row wrap;
}
summary h3 {
display: block;
flex: 1 100%;
}

<summary>
<h3>Heading</h3>
<p>1</p>
<p>2</p>
<p>3</p>
</summary>




Answer

The summary element is not a structural tag, it has its own display properties. It is meant to be a toggled visibility box for the details tag.

According to both the MDN and CanIUse, Chrome has fully implemented the summary tag, while Firefox has not. For an un-implemented tag type, the default behavior of most major browsers is to draw the element as a generic block-level element. In Firefox, then, using the summary tag is essentially the same as using the div tag. In Chrome; however, it may very well be rendered as a replaced element, which would mean (among other things) that you cannot override its display type.

EDIT: The summary tag is now implemented in Firefox as well, as of version 49.