Как сделать, чтобы элемент занимал всю доступную ему ширину?

Question

[LitvintsevIgor]

Здравствуйте, подскажите пожалуйста, как лучше ответить на вот такой вопрос на собеседовании?
"Как сделать, чтобы элемент занимал всю доступную ему ширину?"
На сколько я понимаю, его можно сделать блочным и тогда он займет всю доступную ему ширину. Но скорее всего можно дать более развернутый ответ и вот к примеру если задать элементу width: 100%, так тоже можно ответить или же нет? Помогите плиз) я совсем зеленый)

Answer 1

[kryamk]

Хм, ну даже не знаю...
1. display: block;
2. display: flex;
3. display: block; position: absolute; left: 0; width: 100%;
4. display: block; position: absolute; left: 0; right: 0;
5. если у родителя display: flex; то дочернему прописать flex-grow: 1;

Comments

[LitvintsevIgor]

спасибо)

Answer 2

[Дмитрий Чайников]

Самый простой пример, это блок в блоке, в этом случае первый div class="span3" например, а второй (вложенный) div имеет ширину 100%, при этом он никогда не превысит ширину первого блока, т.е. span3.

Comments

[Ankhena]

Да что вы говорите? Смотрите, превысил и никого не постеснялся:
https://jsfiddle.net/pyf5qmat/

[Дмитрий Чайников]

Ankhena, А зачем Вы padding-right: 50px; сделали? Понятно, что если отступ право или влево делать, то любой блок выйдет за пределы контейнера, задача-то звучала по другому.

[Ankhena]

Дмитрий Чайников,

задача-то звучала по другому

Так и ответ у нее другой ;)

[Дмитрий Чайников]

Ankhena, Ответ в студию :)

[Ankhena]

Дмитрий Чайников,
Простой ответ это сделать элемент блочным (на самом деле и этого ответа недостаточно, но сойдет, потому что это одна из характеристик блочных элементов).

В сложном варианте рассказать про нюансы box-sizing, дочерние элементы флексов, абсолюты и т.д.
Скорее всего будет достаточно дать понять, что понимаете, что будет в разных ситуациях.
Ваш ответ без историй про display и box-sizing я бы не приняла точно.

[LitvintsevIgor]

Ankhena, Дмитрий Чайников спасибо)