[Vuejs]-Prevent div from collapsing when hiding or removing all child elements

by

0👍

✅

I have added a secondary class for the default/native container. I think this is the best/easiest approach.

.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>

Leave a comment