Здравствуйте. Помогите решить проблему.
Есть родитель с динамической шириной, на которую влияют определенные дочерние элементы.
Есть дочерний элемент, который должен быть равен ширине родителя (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 должна быть динамической.
Простой
Средний