html - Flex-basis 除非没有子节点

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>