Верстка не адаптируется под ширину родителя?

Question

[Narts]

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

Полагаю это из-за того, что media смотрит не на ширину родителя, а на ширину экрана. Можно как-нибудь привязать медиа-запросы непосредственно к ширине дива?
Желательно без использования айфремов

Answer 1

[Антон Усачев]

Media-запросы в css основаны на параметрах экрана (ширина, высота, ориентация и т.д.), поэтому через них нельзя обратиться к ширине div. Для слежения за размерами элемента на странице придется использовать js.

Answer 2

[Сергей Карвасарный]

как писали выше нужен js или почему тот элемент который зависит от родителя не сделать в %? изменится размер родителя в процентном соотношении измениться и внутренний блок. Правда не ясно, что за задача и что вы там хотите увеличивать и уменьшать)) Было бы не плохо понять что в том ребенке который не адаптируется под родителя)

Comments

[Narts]

Да взять например бутсраповские карточки (https://getbootstrap.com/docs/4.0/components/card/)

Я их добавил себе, каждый вид карточки в див.demo. Имеются так же 3 кнопки - телефон, пк, планшет. При нажатии на ту или иную кнопку ширина дива.demo меняется.
Это для того чтобы продемонстрировать пользователю адаптивность карточек наглядно

[Narts]

Понимаю, что js может решить проблему, но не понимаю что конкретно гуглить. Если подскажете, буду признателен

[Brad9aga]

Narts, а ты пробовал для приличия хотя бы код скинуть ?

[Narts]

Brad9aga, код чего вам скинуть?
Элементы эти: https://getbootstrap.com/docs/4.0/components/card/
Каждый элемент обернут в див с классом demo
Имеются 3 кнопки, которые меняют width дива demo

О каком коде идет речь?