У меня есть контейнер с 2 детьми.
Один ребенок имеет динамическую ширину и при этом максимальная ширина может заполнять контейнер
Другой дочерний элемент имеет фиксированную ширину и начинает скрываться, поскольку начальная точка находится справа от контейнера overflow:hidden
Я хочу, чтобы дочерний элемент фиксированной ширины перемещался влево, чтобы он точно вписывался в правую часть контейнера, так что
a) Если оба ребенка вписываются в контейнер - другой элемент должен сказать, что положить слева и
b) Если для обоих элементов нет места - элемент с фиксированной шириной должен перемещать другой элемент влево настолько, насколько это необходимо, чтобы поместиться справа от контейнера.
Вот что я пробовал:
Попытка # 1
.container {
width: 200px;
height: 50px;
border: 1px solid green;
overflow: hidden;
white-space: noWrap;
}
span {
height: 50px;
display: inline-block;
}
.child1 {
background: aqua;
float: right;
width: 50px;
margin-right: -50px;
transition: margin .2s;
}
.container:hover .child1 {
margin-right: 0;
}
.child2 {
background: tomato;
//width: 100%;
}
<div class="container">
<span class="child1">Fixed</span>
<span class="child2">Dynamic Width</span>
</div>
<div class="container">
<span class="child1">Fixed</span>
<span class="child2">Here is a Dynamic Width box</span>
</div>