Ввод текста, чтобы все оставалось как ширина

Question

Я хочу, чтобы ввод тегов (как и в стеке) был таким, чтобы пользователи могли вводить выбранные теги, и он отображается внутри ввода.Я решил сделать это внутри ul, где вход является последним li:

  <ul class="tag-box">
    <li class="tags" *ngFor="let tag of tags">{{tag.name}}<a class="close"></a></li>
    <li class="new-tag"><input class="input-tag" type="text"></li>
  </ul>

Но проблема в том, что ширина ввода всегда мала по умолчанию, хотя я хочу, чтобы он взял всю оставшуюся ширину:

my css:

.tag-box {
  list-style: none;
  padding: 3px;
  margin: 0;
  display: inline-block;
  font-family: arial;
  width: 100%;
  border: 1px solid #F39F19;
  border-radius: 4px;
}
.tag-box li {
  padding: 4px 6px;
  float: left;
  display: inline-block;
}
.tag-box li.tags {
  background: #F1C617;
  color: #fff;
  border-radius: 4px;
  margin: 4px 3px;
  position: relative;
}
.tag-box li .input-tag {
  color: #000;
  height: 24px;
  vertical-align: middle;
  border: none;
  outline: none;
  background: none;
}

Есть ли способ, при котором мой ввод может принимать любое оставленное пространство в качестве ширины в соответствии с циклом?

Answer 1

Вот один из способов сделать это, я добавляю 3 вещи. Вы в конечном итоге захотите дать ему min-width и сделать его оберткой.

.tag-box {
  display: flex;
}
.tag-box .new-tag {
  flex: 1
}
.tag-box li .input-tag {
  width: 100%;
}