Перемещающийся элемент для перемещения соседнего элемента только в том случае, если они сталкиваются

У меня есть контейнер с 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>

Ответы

Ответ 1

Вот только CSS-решение.

Фокус в том, чтобы использовать это основное правило:
Рассмотрим два или более встроенных элемента, которые оказываются рядом друг с другом. Если вы увеличиваете ширину первого элемента, то второй элемент сдвигается вправо.

Проблема в том, что вам нужны элементы для перемещения влево. Я решил это, инвертируя направление X дочерним элементам scaleX(-1) и снова инвертируя контейнер.

Чтобы помочь вам лучше понять это, вы можете прокомментировать transform: scaleX(-1); в приведенной ниже ссылке jsfiddle и посмотреть, что происходит.

Красота заключается в том, что вам не нужно знать ширину .child2. Вам просто нужно нажать его налево.

.container {
    width: 200px;
    height: 50px;
    border: 1px solid green;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
    transform: scaleX(-1);
}

span {
   height: 50px;
   display: inline-block;
   transform: scaleX(-1);
}

.child1 {
    background: aqua;
    width: 50px;
    margin-left: -50px;
    float: left;
    transition: margin-left .2s;
    text-align: left;
}

.child2 {
   background: tomato;
}

.container:hover .child1 {
    margin-left: 0;
}

<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>

Ответ 2

Так как css не может делать условные утверждения (bar media-запросы), я не думаю, что это действительно возможно с помощью CSS.

Обновление

Я видел, что на самом деле возможно использование CSS3-преобразований (что работает в современных браузерах). но на случай, если некоторые пользователи могут захотеть более старой поддержки браузеров, которые CSS3-преобразования не могут обеспечить, я все равно оставлю это здесь.

Кроме того, я использовал позиционирование вместо floats, чтобы "очистить" стиль (и попытался jquery):

$('.container').hover(function() {

  var parentWidth = $(this).width();
  var thisWidth = $(this).find(".child1").width() + 50; /*i.e. width of fixed box*/
  if (parentWidth < thisWidth) { /*if it doesn't fit, move it!*/
    $(this).find('.child1').addClass("moveLeft");
  }
}, function() {
  $(this).find(".child1").removeClass("moveLeft");
});

.container {
  width: 200px;
  height: 50px;
  border: 1px solid green;
  overflow: hidden;
  white-space: noWrap;
  position: relative;
}
span {
  height: 50px;
  display: inline-block;
}
.child2 {
  background: aqua;
  width: 50px;
  margin: 0;
  position: absolute;
  top: 0;
  right: -50px;
  transition: all .2s;
}
.child1 {
  background: tomato;
  transition: all .2s;
  position: absolute;
  top: 0;
  left: 0;
}
.container:hover .child2 {
  right: 0;
}
.moveLeft:hover {
  left: -50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <span class="child1">Dynamic Width</span>
  <span class="child2">Fixed</span>
</div>
<div class="container">
  <span class="child1">Here is a Dynamic Width box</span>
  <span class="child2">Fixed</span>
</div>

Ответ 3

Хорошо, я немного изменил код LinkinTED. Попробуй это: http://jsfiddle.net/epfqjtft/9/

Конечно, я не знаю, с чем вы можете работать. Эти проблемы необходимо решить с помощью JQuery.

.container {
    width: 200px;
    height: 50px;
    border: 1px solid green;

    display: table;
    table-layout: fixed;
    transition: all 2s;
}
span {
   height: 50px;
   display: table-cell;
    transition: all .2s;
}
.child1 {
    background: tomato;
    width: 100%;
}
.child2 {
    background: aqua;
    width: 0px;
    overflow: hidden;
    transition: all .2s;
}
.container:hover .child2 {
    width: 50px;
}

<div class="container">
    <div class="wrapper">
        <span class="child1">Dynamic Width</span>
    </div>
    <span class="child2">Fixed</span>
</div>    
<div class="container">
    <div class="wrapper">
        <span class="child1">Here is a Dynamic Width box</span>
    </div>
    <span class="child2">Fixed</span>
</div>

Ответ 4

.container {
    width: 250px;
    height: 40px;
    border: 1px solid read;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
    transform: scaleX(-1);
}

span {
   height: 50px;
   display: inline-block;
   transform: scaleX(-1);
}

.child1 {
    background: pink;
    width: 50px;
    margin-left: -50px;
    float: left;
    transition: margin-left .3s;
    text-align: left;
}

.child2 {
   background: #####;
}

.container:hover .child1 {
    margin-left: 0;
}

<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  Dynamic Width box</span>
</div>