Алексей

HitGirl объясню в чем проблема. Да, фиксированный элемент фиксируется относительно вьюпорта браузера и остается фиксированным при скролле, но в данном случае у вас у родителя (container) установлено свойство container-type: inline-size;
но при установке некоторых свойств они влияют на фиксированно спозиционированные элементы и те становятся позиционируемыми относительно родительского элемента, устанавливающего это свойство, т.е. в данном случае родителя (container) и больше не являются фиксированными относительно вьюпорта браузера.

Вот список всех таких свойств:
filter
transform
backdrop-filter
perspective
contain
container
transform-style
content-visibility

container и в частности container-type в принципе не стоит использовать пока, т.к. 76% всего глобальная поддержка.
В данном случае заменить fixed элемент на sticky самое простое, как вы и сделали. Альтернативный вариант через js получить ширину container и установить ее для mobileSidebar, если требуется иногда прям fixed оставить

Самый старый и простой метод - float:

.tab img {
    height: 200px;
    float: left;
}

Но лучше tab сделать флекс контейнером и потом уже позиционировать внутри элементы как угодно, но в данном случае больше ничего и не нужно:

.tab {
    outline: 5px solid red;
    width: 80%;
    height: 200px;
    margin-bottom: 10px;
    display: flex;
}

1. Не давайте разные названия css классов для совершенно одинаковых элементов.
2. Забудьте про display: table и никогда его больше не используйте.

Такие вещи просто делаются на flexbox, если сомневаетесь в поддержке - https://caniuse.com/#search=Flexible%20Box

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