Почему outer div не будет квадратом, если inner div квадратный с бордером

Что проверяют

Знаете ли вы блочную модель на уровне расчёта, а не на уровне «бордер добавляет пиксели». Хороший ответ ловит подмену: размеры внешнего блока определяются не рамкой ребёнка, а тем, что блок без заданной ширины занимает всю доступную.

Как отвечать

По умолчанию действует content-box: заданные width и height относятся к содержимому, а поля и рамки добавляются снаружи. Внутренний квадрат со стороной 100 пикселей и рамкой 5 пикселей займёт 110 пикселей по обеим сторонам, то есть сам останется квадратом.

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

Есть ещё две причины расхождения: вертикальные отступы ребёнка схлопываются с отступами обычного блочного родителя и выталкивают его наружу вместо просвета внутри, а текст и строчные элементы добавляют высоту от line-height.

*, *::before, *::after { box-sizing: border-box; }
.outer { width: fit-content; }
.inner { width: 100px; aspect-ratio: 1; border: 5px solid; }

Где спотыкаются

Считают, что рамка всегда уменьшает содержимое. При content-box она прибавляется снаружи, при border-box съедает место внутри заданного размера, и путаница здесь даёт неверный расчёт в обе стороны.

Ищут причину в рамке и не вспоминают про поведение блочного элемента по ширине. Именно оно чаще всего и превращает внешний блок в полосу во всю страницу.

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