html - 隐藏或删除所有子元素时防止 div 折叠

Question

我创建了一个 Vuetify 应用来管理一些卡片元素。在添加操作/按钮之前，我检查了用户的权限。如果缺少某些权限，将不会呈现这些按钮。我在这里创建了一个例子

https://codepen.io/anon/pen/RmMRQb?editors=1010

如您所见，第二个 div 崩溃了，因为没有子元素被渲染。这个问题与 Vuetify 无关，所以我将使用默认的 HTML/CSS 示例重现它。

.container {
  background: red;
}

.box {
  display: inline-block;
  height: 32px;
  width: 32px;
  margin: 5px;
  background: blue;
}

.notRendered {
  display: none;
}

<div id="app">
  <h1>Div with visible elements</h1>
  <div class="container">
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
  </div>
  <h1>Div with hidden elements</h1>
  <div class="container">
    <div class="box notRendered">
    </div>
    <div class="box notRendered">
    </div>
    <div class="box notRendered">
    </div>
  </div>
</div>

我不希望 div 折叠。我已经在这里找到了解决方案

JQuery: Prevent div from collapsing when element hides()

但想问一下是否有一种方法可以在不使用一些硬编码高度或选择元素高度的情况下实现它。我不想修改 Vuetify 的原生元素，所以当操作栏为空(没有子项被渲染)并且栏不会折叠时，可能会有一个技巧。

Answer 1

我为默认/ native 容器添加了一个辅助类。我认为这是最好/最简单的方法。

.improved-container {
  background: red;
  min-height: 40px;
}

.box {
  display: inline-block;
  height: 32px;
  width: 32px;
  margin: 5px;
  background: blue;
}

.notRendered {
  display: none;
}

<div id="app">
  <h1>Div with visible elements</h1>
  <div class="container improved-container">
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
  </div>
  <h1>Div with hidden elements</h1>
  <div class="container improved-container">
    <div class="box notRendered">
    </div>
    <div class="box notRendered">
    </div>
    <div class="box notRendered">
    </div>
  </div>
</div>