Please help me to make up such a block. For me, the problem is to set the blocks to the appropriate height.

I would like to use only flexbox features and not add new containers to html.

My attempt here

html:

<div class="timer-button"> <div class="title">Сегодня у нас</div> <div class="col col_days"> <span class="value ng-binding">15</span> <span class="label">апреля</span> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div class="col col_hours"> <span class="value ng-binding">18</span> <span class="label">часов</span> </div> </div>

css:

 body{ width: 400px; margin: 0 auto; } .timer-button { width: 90%; min-height: 50%; background: #e15d29; border-radius: 10px; margin: 0 auto; display: flex; flex-wrap: wrap; color: #fff; padding: 10%; overflow: hidden; } .timer-button .title{ background: lime; width: 100%; height: 40%; } .col{ width: 50%; height: 60%; overflow: hidden; } .col_days{ background: cyan; } .col_hours{ background: magenta; }

    2 answers 2

    The height in percent must be given relative to the parent.

      html, body, .timer-button{ height: 100%; }

    Flex won't help here.

     * { box-sizing: border-box; } body{ width: 400px; margin: 0 auto; } html, body, .timer-button{ height: 100%; } .timer-button { width: 90%; min-height: 50%; background: #e15d29; border-radius: 10px; margin: 0 auto; display: flex; flex-wrap: wrap; color: #fff; padding: 10%; overflow: hidden; } .timer-button .title{ background: lime; width: 100%; height: 40%; } .col{ width: 50%; height: 60%; overflow: hidden; } .col_days{ background: cyan; } .col_hours{ background: magenta; } 
      <div class="timer-button"> <div class="title">Сегодня у нас</div> <div class="col col_days"> <span class="value ng-binding">15</span> <span class="label">апреля</span> </div> <div class="col col_hours"> <span class="value ng-binding">18</span> <span class="label">часов</span> </div> </div>

      If you understand the essence of the problem correctly, you need to add:

       html, body { height: 100%; }

      And to .timer-button { height: 50%; } .timer-button { height: 50%; }