弹性基础，除非没有孩子

Question

我使用flex css进行以下布局，并且我的左侧容器的宽度设置为20％。如果.col.left-col为空（som divs呈现为.my-left-div），我希望它崩溃。

如果我将.grid--container .left-col更改为.grid--container .my-left-div，则.left-col的宽度不再是20％，而是更多，如果没有JavaScript，是否可以解决？

---------------------------------
|         top                   |
---------------------------------
|       |            |          |
|  left |   middle   |  right   |
|       |            |          |
|       |            |          |
|       |            |          |
|       |            |          |
|       |------------------------
|       |          bottom       |
---------------------------------

html就是这样。

    .grid--container {
      display: flex;
      width: 100%;
      justify-content: left;
    }
    .grid--container .left-col {
      flex: 0;
      flex-basis: 20%;
    }
    .grid--container .top {
      margin-top: 28px;
    }
    .grid--container .right-col {
      flex: 1;
      padding-left: 20px;
    }
    .grid--container .wrapper {
      display: flex;
    }
    .grid--container .wrapper > div {
      flex: 1;
    }
    

 <div class="grid--container">
      <div class="col left-col">
        left
      </div>

      <div class="col right-col">
        <div class="top">
          top
        </div>

        <div class="wrapper">
          <div class="middle">
            middle
          </div>
          <div class="right">
            right
          </div>
        </div>

        <div class="bottom">
          bottom
        </div>
      </div>
</div>

Answer 1

已解决：

使用：empty选择器。

    .grid--container {
      display: flex;
      width: 100%;
      justify-content: left;
    }
    .grid--container .left-col {
      flex: 0;
      flex-basis: 20%;
    }
    .grid--container .left-col:empty {
      flex-basis: 0%;
    }
    .grid--container .top {
      margin-top: 28px;
    }
    .grid--container .right-col {
      flex: 1;
      padding-left: 20px;
    }
    .grid--container .wrapper {
      display: flex;
    }
    .grid--container .wrapper > div {
      flex: 1;
    }
    

 <div class="grid--container">
      <div class="col left-col">
        left
      </div>

      <div class="col right-col">
        <div class="top">
          top
        </div>

        <div class="wrapper">
          <div class="middle">
            middle
          </div>
          <div class="right">
            right
          </div>
        </div>

        <div class="bottom">
          bottom
        </div>
      </div>
</div>