Почему при дублировании идентичного объекта, он меняет свои характеристики?

Question

[RealBoy211]

В первом блоке я продублировал круг — то есть там два круга с одинаковыми свойствами. Во-втором — только один. 

Объясните, почему ширина отличается (незначительно, но в моем случае это критично), если у них одинаковые свойства? По логике, сколько бы я не поместил кругов в контейнер, если они обладают одинаковыми свойствами, они не должны увеличиваться, условно, в размерах (вообще не должны менять форму/размер/цвет). 

Comments

[v3shin]

У меня они отображаются одинаковыми, проверил в Chrome.

[Артем Золин]

Я тоже не вижу разницу

[andand44]

Они сжимаются, если не хватает места. flex: 0 0 auto; должно помочь, если нужно сохранить размеры

.container {
    flex: 0 0 auto;
}

[RealBoy211]

andand44, там они же с абсолютным позиционированием, поэтому, как мне представляется, не должны быть зависимыми от других объектов. Или я ошибаюсь?

[andand44]

RealBoy211, Зависят от ширины родителя, если ширина и высота заданы в процентах. Если нужны пропорционально сжимаемые круги, то нужно гуглить про padding bottom hack или про aspect ratio
https://css-tricks.com/aspect-ratio-boxes/

[RealBoy211]

andand44, попробовал, не работает

[andand44]

RealBoy211, Печально. Тогда сделаю за вас эти круги

[RealBoy211]

andand44, в смысле? Я не понял, что должна была отобразить песочница. Вы, вероятно, не так вопрос поняли?

[andand44]

RealBoy211, Вероятно.

[Ankhena]

Я не смогла воспроизвести проблему чтобы круги стали разными. По всем браузерам ползать не целесообразно.
Опишите, что нужно сделать, чтобы увидеть их разными.

В теории, флекс может сжимать .container'ы, хотя в ситуации с вашими размерами он не должен бы этого делать.
Но можете попробовать задать для них flex-shrink: 0.

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

Answer 1

[Andrew]

Добавь свойство к классу shape
Что такое box-sizing - https://developer.mozilla.org/ru/docs/Web/CSS/box-...

.shape {
  box-sizing: border-box;
}