Почему display inline-block не работает для outer div, а flex работает

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

Различаете ли вы, на что влияет display: на поведение самого элемента среди соседей или на раскладку его детей. Вопрос почти всегда вырос из реальной задачи «поставить детей в ряд», поэтому уточнить, какой именно эффект ожидался, здесь правильный первый шаг.

Как отвечать

display: inline-block описывает элемент снаружи: он встаёт в строку рядом с текстом и обтягивает содержимое по ширине. Внутри у него остаётся обычный блочный поток, дети по-прежнему укладываются друг под друга на всю доступную ширину. Поэтому повесить inline-block на контейнер и ждать, что дети выстроятся в ряд, бессмысленно: свойство про сам контейнер. Рабочий приём с inline-block вешают на детей, а не на родителя.

display: flex устроен наоборот: снаружи элемент остаётся блочным, а меняется правило раскладки детей. Они становятся флекс-элементами, встают в ряд, получают gap, выравнивание по обеим осям и умеют сжиматься и растягиваться.

.outer { display: flex; gap: 8px; align-items: center; }
.outer-fit { display: block; width: fit-content; }

Если задача была именно обтянуть содержимое, у inline-block есть цена: элемент попадает в строчный контекст и начинает зависеть от line-height и vertical-align. Сегодня то же самое делается через width: fit-content или inline-flex, без побочных эффектов строки.

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

Отвечают «flex лучше, а inline-block устарел». Это не объяснение, и на уточнении «что именно меняет каждое из них» ответ рассыпается.

Забывают про зазоры от переносов строк в разметке между соседними inline-block. Пробелы там значимы, и лечить их отрицательным отступом значит расписаться в непонимании: либо нулевой размер шрифта у родителя, либо переход на флекс.

Не помнят про выравнивание по базовой линии. У строчных боксов оно стоит по умолчанию, поэтому соседние inline-block с разным содержимым разъезжаются по вертикали, а знаменитый просвет под картинкой берётся оттуда же.