Как задать min-width 100% или 200px?

Question

[Dubrovin]

Можно ли сделать такое для элемента с помощью CSS?

Answer 1

[Сергей delphinpro]

как-то так

Answer 2

[lamer350]

width: 100%;
min-width: 200px;

Comments

[Dubrovin]

Прошу прощения, забыл написать, что это для элемента с position: absolute
Тогда, если контент больше, чем width у родителя, то width всё равно будет 100%.
Нужно чтобы width было не меньше 100% и не меньше 250px, но не ограничивалось 100%.

[Максим Тимофеев]

Dubrovin, делайте min-width: 100%; а min-width: 200px; через медиазапросы. Наверняка ситуация когда нужно это правило наступает при определенной ширине экрана

[Dubrovin]

Максим Тимофеев, нет, речь идёт про выпадающий список (dropdown). Его ширина должна быть не меньше 250px и не меньше чем 100% у родителя (кнопки или инпута в данном случае). Если поставить min-width 250px, то в случае если инпут, например, 400px, но дропдаун получается слишком узким, а если поставить min-width 100%, но в случае когда инпут (кнопка) узкая, то опять же дропдаун получается слишком узким.
Получается, что он должен быть не уже, чем 250px и не уже чем 100% родителя одновременно

[Максим Тимофеев]

Dubrovin, ну дропдаун всеравно через js удобнее делать, так что и размеры тогда без проблем через js решаются

[Сергей delphinpro]

Cоглашусь с Максим Тимофеев . Задача, поставленная автором, в целом решается довольно просто. Но всё равно возникают проблемы, когда выпадашка будет выходить за пределы вьюпорта. Нужно будет пересчитывать ее размеры (и даже направление выпадания верх/низ), чтобы оставлять в видимой части страницы. А раз так, то уж всё можно переложить на плечи javascript.

Answer 3

[Андрей Глюк]

min-width:200px; можно. Но min-width:100%; нельзя. Это просто измена логики. Логически подумайте, как может быть минимальная ширина максимальной?

Comments

[Dubrovin]

Минимальная ширина элемента должна быть 100% ширины родителя элемента.

[Андрей Глюк]

Я Вам ещё раз говорю, минимальная ширина не может быть максимальной. А 100% это и есть максимальная. Элемент может просто иметь обычную ширину 100% как показал lamer350, но минимальную в 100% не может.

[Dubrovin]

Андрей Глюк, когда вы пишите width: 100% - и у родителя стоит position: relative, это означает width родителя.
например, родитель в ширину 100px, если я напишу у дочернего div ширину width: 150%, то дочерний div будет с шириной 150px.
Пожалуйста, оставьте этот вопрос, если не понимаете, о чём идёт речь.