Flex-basis，除非不存在子级

Question

我使用flex css实现了以下布局，并将左侧容器设置为宽度为20%。如果.col.left-col为空，我希望它崩溃(在.my-left-div中呈现了某些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>

​