TIL #20 flexbox에서는 hidden 속성이 안먹힌다...?!! [22.07.22]

정말 계속 삽질하다가 알게 된 뜻밖의 사실

Flexbox에서는 hidden 속성이 안먹힌다!!

<div id="welcome" hidden> <!--없어져야 되는데 안 없어짐;;-->
	<form>폼을 숨겨야 합니다</form>
    <div>환영합니다</div>
</div>

#welcome {
  display: flex;
}

이럴 경우 hidden이 전혀 안먹힌다....?!

처음에는 css flexbox속성 때문인지 모르고, 오타나 자바스크립트 코드만 계속 보고 있었다... 근데 개발자도구에서 element를 봐도 hidden이 잘 부여가 되고 아무리 봐도 이상한게 없어서 css를 건드려보니까 flexbox가 문제였네...????

stackoverflow: hidden-property-does-not-work-with-flex-box

역시 스택오버플로우에 관련 질문이 있었다.

아... hidden은 css를 변경하지 않고, 또 css보다 속성의 순위가 낮아서 제대로 반영이 안되는 것이었다. 그랬군... 순위가 낮아서 그런건가?! 생각은 했지만 정말 그랬다니!

앞으로는 자바스크립트 코드에서 hidden 속성을 건드릴 때 css에서 flexbox를 안썼는지 확실히 확인하고 사용해야겠다.