Как предотвратить переполнение абсолютно позиционированного дочернего элемента внутри относительного контейнера?

Question

Надеюсь, мой вопрос достаточно ясен: я получил содержащий div элемент, который я хочу рассматривать как уникальный блок элементов, все перемещающихся слева от моей панели навигации. Внутри этого родительского div у меня есть два элемента ul, элемент span-разделителя и поле ввода, которое я хочу сделать одинаковой по высоте контейнера и хотел бы иметь переменную ширину, потому что по умолчанию он никогда не изменяет размер и выглядит ужасно когда ширина экрана меняется. Я попытался сделать родительский div относительно позиционированным и сделать входную позицию абсолютной, с высотой 100%; произошло то, что теперь содержащийся элемент выглядит так, как если бы он находился за пределами содержащего элемента div (граница красного цвета на этом изображении)

Хотя моя идея была использовать div с красной рамкой для изменения размера входных данных. Как мне этого добиться? Я могу предоставить свой код, но, поскольку могу поспорить, его придется полностью переписать, чтобы соответствовать этой цели, и я не уверен, что он будет использоваться.

Answer 1

Вы можете сделать это с flexbox

ul{
  padding:0;
  list-style:none;
  display:flex;
}

li{
    margin-left:5px;
}

.flex{
  display:flex;
  border:solid 1px #f00;
  padding-left:10px;
}

input{
  margin-left:auto;
}

<div class="flex">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
    
    <input type="text">
</div>

Или, задав элемент ввода box-sizing:border-box:

ul{
  padding:0;
  list-style:none;
  display:flex;
}

li{
    margin-left:5px;
}

.flex{
  position:relative;
  border:solid 1px #f00;
  padding-left:10px;
}

input{
  position:absolute;
  right:0;
  top:0;
  height:100%;
  box-sizing:border-box;
}

<div class="flex">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
    
    <input type="text">
</div>