Flex-основа, если нет ребенка

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

Решено:

С помощью: пустого селектора.

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