Leave fluid Ivs

Question

I have the following structure

<div id="container-header">
  <div class="center">

    <div class="content-header">content-header</div>
    <div class="thumb-header">thumb-header</div>

  </div>
</div>


div {width: 100%;}

.center {
   width: 71.42857142857143%;/*1200/1680*/
   margin: 0 auto;
}

.center > div {
   height: 120px;
   background-color: #ccc;
}

.content-header {width: 83.33333333333333%;/*1000/1200*/}

.thumb-header {width: 14.33333333333333%;/*172/1200*/}

outworking

now when I lower the screen to div thumb-header loses its normal size, in which case it would have to make a media queries for each situation or there is another way?

Answer 1

If I understand correctly you want it to be 14.3% wide, but you want it to respect a minimum width, for that you will have to use a min-width. For example if the screen is very wide the size is 14.3%, but if it is very small it will be at least 160px wide for example... And the right div you leave with flex:1 so she’ll just occupy the remaining space

Follow the image code above.

div {border: 1px solid #000;}

.center {
    width: 71.42857142857143%;/*1200/1680*/
    margin: 0 auto;
    display: flex;
}

.center > div {
    height: 120px;
    background-color: #ccc;
}

.content-header {
  flex: 1;
  /* espaço entre uma div e outra */
  margin-right: 16px; 
  }

.thumb-header {
  width: 14.33333333333333%;/*172/1200*/
  min-width: 160px;
 }

<div id="container-header">
  <div class="center">

    <div class="content-header">content-header</div>
    <div class="thumb-header">thumb-header ratione rem consequatur.</div>

  </div>
</div>