Возможен ли адаптив блока от ширины не экрана, а родительского блока?

Question

[webymax]

Если ширина родительского блока меняется без изменения ширины экрана, возможно ли через css адаптировать внутреннее его содержимое?

Comments

[WapSter]

Да но нужен навык, flex отлично адаптирует сетку в зависимости от родителя. Довольно часто не приходится адаптировать внутренние блоки, если предусмотрено поведение, и активно используются не фиксированные величины.

[Сергей delphinpro]

Конкретно медиа-запросы не работают от элементов, только от вьюпорта или экрана.
Но в целом некоторые техники верстки позволяют делать адаптивные блоки от доступного для их размещения места. В первую очередь с применением flex и grid раскладок.

[WapSter]

Сергей delphinpro, с гридами немного посложнее это реализовать, вот адаптировать их очень просто.

[Сергей delphinpro]

Тимур Турсунбаев, наоборот, мне кажется. Там есть repeat() и minmax(), с которыми прямо чудеса творить можно

[WapSter]

Сергей delphinpro, вот тут вы как раз не правы) Выше перечисленные функции нужны для построения ячеек и их размера, и если мы зададим n ячеек то они все равно останутся в не зависимости от ширины/высоты, а флекс перемещает ячейку, если ей не хватает места.

[Сергей delphinpro]

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

[WapSter]

Сергей delphinpro, единственный способ по которому можно в гридах задать плавающее размещение при помощи dence, но в этом случае они могут повести себя непредсказуемо. Но если у вас есть время и желание, можете показать пример? Допустим я задал три столбца, они не фиксированы, но их все равно 3, и при уменьшении размера после порога минимума, они обычно наезжают друг на друга.

[Сергей delphinpro]

Тимур Турсунбаев, как-то так, например https://codepen.io/anon/pen/pXpBJj?editors=1100

[WapSter]

Сергей delphinpro, круто, спасибо!