Может ли переполнение: скрытый эффект повлиять на макет?

Question

Я не могу объяснить это, кроме как обратиться к следующему примеру на JS Fiddle - в нем последнее СИНИЕ поле не расширяется до 100% ширины, как ожидается после того, как я ввожу переполнение: скрытый атрибут.

У меня сложилось впечатление, что переполнение: скрытое будет влиять только на аспекты видимости и не мешать компоновке. Может кто-нибудь объяснить, что происходит в этом примере?

EDIT: Эта проблема, кажется, ограничена браузерами webkit (например, Chrome)

Answer 1

Это потому, что overflow: hidden, помимо других свойств, вводит новый контекст форматирования блока .

Вы можете прочитать об эффектах в этой замечательной статье: Магия переполнения: скрыто

ОБНОВЛЕНИЕ: Я переписал ваш jsFiddle во что-то, что работает (проверено на Chrome).Вместо того, чтобы определять margin-left для #red и #blue (что из-за overflow: hidden будет действовать иначе), я поставил margin-right на #yellow.