<!DOCTYPE html>
<!--
 | Descendant elements of the element with "display: none" do not generate any
 | boxes; the element and its content are removed from the formatting structure
 | entirely. This behavior cannot be overridden by setting the "display"
 | property on the descendants.
 |   https://www.w3.org/TR/CSS21/visuren.html#display-prop
 -->
<html>
<head>
  <style>
    .outer {
      display: none;
    }

    .inner {
      background-color: #f44336;
      display: block;
      height: 100px;
      width: 100px;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner"></div>
  </div>
</body>
</html>