Почему появляется горизонтальный скролл?

Question

[Eastar]

В данном простом коде я ожидаю, что при уменьшении окна браузера, ширина first будет уменьшаться до размера окна. Он уменьшается, но появляется горизонтальный скролл. Не могу понять, почему?

Answer 1

[holfza]

https://jsfiddle.net/dm4cd2tk/2/

Comments

[Eastar]

маргины со всех сторон нужны...

[Sn0wSky]

Роман Шаталов: тогда используйте padding'и родителя, потому что margin не учитывается в ширине
https://jsfiddle.net/e1xwotty/

[Sn0wSky]

Роман Шаталов: ну или более наркоманский вариант с width: calc(100% - 100px); , но лично сам не практикую такого

[Eastar]

Sn0wSky: В общем задача была чуть иная. Нужно было, чтобы при добавлении новых блоков, если позволяет ширина страницы, они были в ряд и между ними был отступ в 50px. А если не позволяет, то блоки адаптировались под ширину экрана с отступами со всех сторон по 50px. как тут https://jsfiddle.net/dm4cd2tk/3/. Но похоже придется как-то выкручиваться, т.к. справа маргины не считаются почему-то.

[Sn0wSky]

Роман Шаталов: https://jsfiddle.net/ucafvwda/ ?

[Eastar]

Sn0wSky:Спасибо! До меня тоже дошло такое решение, но мне кажется не очень элегантно) Это нормальная практика?

[Sn0wSky]

Роман Шаталов: ну бутстрап так и делает, разве что с флоатами.
Но если смущают дополнительные дивы, есть еще вариант с word-spacing
https://jsfiddle.net/ucafvwda/1/

[Eastar]

Sn0wSky: Большое спасибо, узнал довольно много нового!

Answer 2

[Тимур Бойко]

Так попробуй указать margin в процентах или, если по центру, margin: 0 auto; (Мне помогало)) )

Answer 3

[denny911]

https://jsfiddle.net/pizelberg/dm4cd2tk/5/