Как использовать calc в мобильной верстке?

Question

[Zimaell]

Дизайн прост, шапка 100% длины, в ней 2 блока - первый 50px, второй оставшаяся длина, делаю так

<style>
.header{ height:50px; width:100%; background-color:#E8E8E8; }
.logo{ width:50px; height:50px; float:left; }
.header_container{ width: calc(100% - 50px); height:50px; float:left; background-color:red; }
</style>
<div class="header">
  <div class="logo"></div>
  <div class="header_container">text text text text text text text text text text text text text</div>
</div>

блок вылазит за пределы экрана, что не так делаю?

Answer 1

[Alex]

calc тут не нужен. Тут подходит flex-box.
Сделал для вас пример с комментариями