CSS: Правильно ли, что текстовое содержимое div переполняется в отступы?

Я ожидал, что отступы внутри div останутся без текста. Но, учитывая следующий html / css, контент-текст выливается в отступы;

<div class="foo">helloworld</div>

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 10px;
  width: 50px;
  border: 1px solid green;
}

Текст выходит за пределы своего размера 50 пикселей и попадает в отступ в 10 пикселей. Это задумано? Если это так, это кажется довольно глупым - заполнение не является заполнением, если в нем есть что-то! Или я просто что-то не так делаю?

С уважением, новичок в CSS.