如果CSS没有子元素，则使用CSS隐藏元素

Question

我有一个标题栏，其中包含3个div元素。如果屏幕宽度小于x我想隐藏第一个容器和第二个容器，如果它不包含任何元素。

所以我去了这个

https://jsfiddle.net/5x8bdd51/

#parent {
  height: 50px;
  display: flex;
}

.container {
  flex: 1;
}

#c1 {
  background: red;
}

#c2 {
  background: green;
}

#c3 {
  background: blue;
}

@media (max-width: 500px) {
  .container:first-child {
    display: none;
  }
  .container:nth-child(2) {
    display: none;
  }
}

<div id="parent">
  <div class="container" id="c1">

  </div>
  <div class="container" id="c2">

  </div>
  <div class="container" id="c3">
    <p></p>
  </div>
</div>

如您所见，第一个和第二个容器将隐藏在较小的屏幕上。但是，如果第二个容器是空的，我怎么才能隐藏它呢？

伪代码

  .container:nth-child(2) @if :empty {
    display: none;
  }