使用 Flexbox 时如何在 HTML 树中 "skip" div？

Question

我正在尝试在现有站点上使用 Flexbox，我需要以某种方式告诉浏览器 "skip" 树中的几个 div。

让我用一个简单的例子来解释。我有一个这样的 HTML

<body style="display: flex;   
             min-height: 100vh;   
             flex-direction: column;">
    <div id="want_to_skip">
        <div style="flex: 1;">
        </div>
        <div id="footer"></div>
    </div>
</body>

并且我希望它表现得像这样

<body style="display: flex;   
             min-height: 100vh;   
             flex-direction: column;">
    <div style="flex: 1;">
    </div>
    <div id="footer"></div>
</body>

不幸的是，我需要 "skipped" div 在那里，无法删除它。我该怎么办？

Answer 1

CSS Display L3 introduces display: contents:

The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.

#want_to_skip {
    display: contents;
}

body {
  display: flex;
  margin: 0;
}
body > div {
  flex: 1;
}
.wrapper {
  display: flex;   
  min-height: 100vh;   
  flex-direction: column;
  border: 1px solid;
}
.top {
  flex: 1;
}
.want_to_skip {
  display: contents;
}

<div>
  <div class="wrapper">
    <div>
      <div class="top">   No skipping - Top   </div>
      <div class="bottom">No skipping - Bottom</div>
    </div>
  </div>
</div>
<div>
  <div class="wrapper">
    <div class="want_to_skip">
      <div class="top">   Skipping - Top   </div>
      <div class="bottom">Skipping - Bottom</div>
    </div>
  </div>
</div>
<div>
  <div class="wrapper">
      <div class="top">   Desired - Top   </div>
      <div class="bottom">Desired - Bottom</div>
  </div>
</div>

目前仅Firefox 37支持。

使用 Flexbox 时如何在 HTML 树中 "skip" div？

How to "skip" div in HTML tree when using Flexbox?

html

css

flexbox