Как ограничить максимальную ширину дочернего элемента шириной родителя?

Question

[Jeasnando]

Здравствуйте. Помогите решить проблему.

Есть родитель с динамической шириной, на которую влияют определенные дочерние элементы.
Есть дочерний элемент, который должен быть равен ширине родителя (100%), но при этом не должен увеличивать его ширину (если вдруг ширина дочернего элемента окажется больше родительного элемента).

Как это реализовать?

Вот явный пример с проблемой:

<div class="parent">
	<div class="child1"></div>
	<div class="child2">длинная неразрывная строка с текстом</div>
</div>

.child1
	width: 100px;
}
.child2 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

Что нужно: чтобы ширина .parent зависела от .child1 (в примере равна 100px), но при этом, чтобы .child2 не влиял на ширину родителя и был равен ему (то есть и максимальная ширина и минимальная ширина были равны ширине родителя). Проблема в том, что если выставить max-width для .child2 в 100%, то он просто растянет родителя до своей собственной ширины. По сути, получается, что ширина .child2 должна равняться ширине .child1, так как на .parent должен влиять только .child1, а максимальная и минимальная ширина .child2 должна быть динамической.

Comments

[2cha.headz]

поставьте

.child2 {
    display:inline-block; 
    max-width: 100%;
}

при этом ширина child2 будет динамической (зависящей от контента), но не больше максимальной ширины родителя

[Jeasnando]

2cha, все равно растягивает. Если заменить .child2 с div на input, содержимое вставить в атрибут value и выставить width: 100%, тогда это то, что нужно. В остальных случаях .child2 без фиксированной ширины у меня растягивает ширину родителя. Условия: неразрывный текст в .child2 и динамическая ширина .parent .

Answer 1

[Валера Майшев]

Использовать margin... display:inline-block; max-width:100%; и тд...

Comments

[Jeasnando]

Не подходит. По прежнему растягивает ширину родителя. Можете на основе простого кода из вопроса добавить свойства с нужными значениями, чтобы продемонстрировать рабочий пример, при которым бы .child2 с неразрывным текстом не увеличивал ширину .parent?