Невозможно объяснить это, кроме как ссылаться на следующий пример на JS Fiddle - в нем последний BLUE-код не простираются до 100% от ширины, как и ожидалось после того, как я введу переполнение: скрытый атрибут.
Я был под впечатлением переполнения: скрытый повлиял только на аспекты видимости и не мешал макету. Может ли кто-нибудь объяснить, что происходит в этом примере?
EDIT: Эта проблема, похоже, ограничена браузерами webkit (например, Chrome).
Именно потому, что overflow: hidden, среди других свойств, вводит новый блок форматирования.
Вы можете прочитать о последствиях в этой замечательной статье: Магия переполнения: скрытая
ОБНОВЛЕНИЕ: Я переписал jsFiddle в то, что работает (протестировано в Chrome). Вместо определения margin-left в #red и #blue (который будет действовать по-другому из-за overflow: hidden), я положил margin-right на #yellow.