STR: 1. Go to a Youtube video with enabled live/replay chat. eg https://www.youtube.com/watch?v=tCf2mNyTsgQ 2. Click on the "HIDE CHAT" button. Expected: Chat box height should collapse to 0px and effectively hide it. Actual: Chat box #chatframe iframe reduces to 150px leaving chat still visible.

Seem to be related to flexbox. When flex is non-zero, the iframe would have height 150px regardless of its height property or attribute.

dholbert, any idea why this happens?

Let's set the attached testcase aside for a second. At the original YouTube URL, the iframe is intended to be hidden by this rule (when the "collapsed" attribute is applied to its parent): > ytd-live-chat-frame[collapsed] iframe.ytd-live-chat-frame { > height: 0; If I additionally add "min-height:0" to that style rule, then the chat area does actually get hidden. This *shouldn't* be necessary for the web developer to do, but it currently is necessary in Firefox, due to our implementation being a bit out of date on one spec section. This is a version of bug 1331692 (for 'height' rather than 'width'), which is a piece of a more general flexbox spec update tracked in bug 1136312. Now -- the attached testcase still renders differently between Chrome and Firefox, even if I add "min-height:0", so I think that's demonstrating an unrelated interop issue. I'll poke at that a bit more and possibly file a separate bug.

The testcase behaves differently because there are no other flex items vying for space, I think. The reason the iframe has nonzero size in the attached testcase is that it has "flex: 1" which to us implies "flex:1 1 0%" in the spec snapshot that we implement, and 0% in an unconstrained-height container gets treated as an auto-height. Really, flex:1 should imply "flex: 1 0 0px" though, which is bug 1368592. (Chrome also has flex:1 1 0% here; I'm not sure why they don't treat 0% as auto-height.)