сосуществование минимальной ширины и ширины

Question

У меня возникли проблемы с получением min-width в rem сосуществуют с шириной в процентах. When resizing this jsfiddle the outer right block is going under because of the min width restrictions. Мне интересно, есть ли простой способ обойти это и сохранить эту ширину min + width?

<div class="container"> 
    <div class="first"> 
    </div> 
    <div class="second"> 
    </div> 
    <div class="third"> 
    </div> 
</div> 


.container{ 
    min-width:20rem; 
    width:80%; 
    border: 1px solid black; 
    height:50px; 
} 
.first{ 
    min-width:3rem; 
    width:15%; 
    background:red; 
    height:50px; 
    float:left; 
} 
.second{ 
    min-width:10rem; 
    width:65%; 
    height:50px; 
    background:yellow; 
    float:left; 
} 
.third{ 
    min-width:7rem; 
    width:20%; 
    background:green; 
    height:50px; 
    float:left; 
} 

Answer 1

Если вы хотите, чтобы сделать сайт более отзывчивым при просмотре в мобильных устройствах, попробуйте использовать CSS медиазапросы

Смотрите простой учебник здесь W3Schools tutorial

И если вы действительно хотите глубокого понимания, то это будет основной помощью: CSS Tricks - Media queries

CSS-трюки будут полезны для изучения чего-либо вокруг CSS