Flex-basis unless no child exists

Question

I have the following layout using the flex css, and my left container is set to hav the width 20%. I want it to collapse if .col.left-col is empty (som divs is rendered there .my-left-div)

If i change .grid--container .left-col to .grid--container .my-left-div the width of the .left-col is no more 20% but more, is that possible to solve without javascript?

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

the html is like this.

  .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

Solved:

By using the :empty selector.

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