'hidden' property does not work with flex-box
css, flexbox, html
Solution
The easiest fix is to override the entire behavior with an attribute selector. No document changes needed:
[hidden]{
display:none;
}
http://jsfiddle.net/mjxcrrve/
I am guessing the logic behind the default behavior is to allow overriding the "hidden" html attribute with CSS. "hidden" is more or less an implicit "display: none", so overriding the "display" style is a a natural candidate. But I agree it seems ill-thought-out that modifying pure layout should affect visibility.
Problem
I have the following code using flex-box ``` <!DOCTYPE html> <polymer-element name='test-flex'> <template> <style> .lab-flex-col-container { display: flex; flex-flow: column; align-content: center; background-color: gold; border-radius:5px; margin: 5px; } .lab-flex-col { display:flex; flex-flow:column; align-self:center; margin:5px; } .margin2 { margin: 2px; } </style> <form id='form' class='form'> <div class='lab-flex-col-container'> <div class='lab-flex-col' id='hidden-does-not-work' hidden> <input id='hidden-works' type='text'> </div> <div id='hidden-works' hidden> <textarea></textarea> </div> <div id='hidden-does-not-work-here-either' class='lab-flex-col' hidden> <button>Save</button> </div> </div> </form> </template> <script type="application/dart;component=1"> import 'package:polymer/polymer.dart'; import 'dart:html'; @CustomTag( 'test-flex' ) class TestFlex extends PolymerElement { TestFlex.created() : super.created(); ready() { $['hidden-does-not-work'].hidden = true; } void syncDb ( Event e, var detail, var target ) { } @override void enteredView() { super.enteredView(); $['hidden-does-not-work-here-either'].hidden = true; } } </script> </polymer-element> ``` Why does the presence of the lab-flex-col class prevents the hiding of the text input? I have tried hidden='hidden' and this does not work either. When hidden is present as in the textarea element, it works as expected, but once the flex-box class is added, it ceases to work and the element remains visible.