laggingreflex laggingreflex - 1 year ago 93
CSS Question

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

I have a

display: flex
on a
tag with some child
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?

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


Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download