В чем разница между html-блоком фиксированной ширины и эластичным. Разное поведение с одинаковыми условиями

Проблема в том, что я не могу понять, как она работает, я говорю о блоках процентной ширины HTML. Я использую хром для ОС Windows. Вот пример моего примера

Есть 1 блок div div с шириной 60%, внутри него находится другой блок. И внутри этого второго блока есть еще два. Они имеют фиксированную ширину 345 и 346 пикселей. Если вы измените размер окна в размере тестового файла (# галлерея должна иметь ширину 691 пиксель, есть информационный блок, который поможет вам это сделать). Таким образом, у нас есть блок 691px и внутри него два блока с 345 и 346 px, но они не будут соответствовать родительскому блоку, пока он не зафиксировал div. Чтобы проиллюстрировать это, я добавил ссылку "toggle" в синем блоке, щелкнув по ней, вы переводите "фиксированный" класс на #wrap, поэтому он теряет 60% и получает 691, когда это делается, все дочерние блоки подходят контейнер отлично.

Я не могу понять, что происходит :) Пожалуйста, помогите мне. (Я пытаюсь создать мою еще одну галерею изображений, поэтому мне нужны изображения, блоки, не имеет значения, какие... сущности подходят для контейнера с определенной шириной.

UPD. о границах, границах... там включен normalize.css, поэтому он ванирует его с помощью правила * {box-sizing: border-box}