Создание содержимого изменяемого размера div [SOLVED with hack]

Question

Я создал «виртуальный рабочий стол» для веб-приложения, которое я разрабатываю, и на этот рабочий стол я могу открыть «виртуальные окна». Каждый из них представляет собой абсолютно позиционированный div, который можно перемещать, изменять размер и так далее. Я хотел бы сделать содержание (некоторые из) этих «окон» отзывчивыми, масштабируясь от 4 столбцов по 25% каждый, до 1 столбца на 100%.

Я не использую никаких фреймворков, так как это один крайний кейс, который я надеюсь решить с помощью специального решения.

Я пробовал @media, но это не имеет никакого эффекта, поскольку я не изменяю размер фактического окна браузера, а только размеры области содержимого виртуального окна.

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

Возможно ли это?

Answer 1

Да - это возможно ... Но:

Вы не можете сделать это с DIV.

После славного количества кофе, до меня дошло, что @media принимает это размеры от document.window, поэтому самый простой способ решения этого встраивать «отзывчивые» элементы в iframe. Это дает @media свои собственные локализованные границы документа в основном содержимом страницы (или на рабочем столе в моем случае). Если мое содержимое псевдоодного окна является отдельным документом, с его собственным набором ограничивающих размеров, @media работает как сон, и у меня могут быть гибкие макеты внутри изменяемых размеров div ...

Легко, когда вы думаете об этом.

ASIDE:

Я попытался с помощью Flexbox, и при этом достигается часть того, что я был после (т.е. растягивание содержания для заполнения доступного пространства), то не стало, когда он пришел к сокращению содержания вниз ниже его атрибута min-width , и обертывающий механизм был, если честно, носить красивые брюки. Есть множество настроек для игры, хотя, возможно, можно использовать его для конкретных случаев использования. Это определенно было бы более аккуратным решением.