Инпут в ширину зависящий от содержимого

Question

Появилась проблема при верстке, раньше вместо инпута был обычный спан с возможностью редактирования и все выглядело нормально, но когда, по надобности, поменял на инпут, то полетела ширина, нужно чтобы ширина инпута зависела от его значения, как можно это исправить?

HTML
<div class="card-page__count">
    <button class="card-page__btn-minus">-</button>
    <span class="card-page__count__span">
         <input type="number" class="card-page__count__span__responce" value="1">
         <!-- <span contenteditable="true" class="card-page__count__span__responce">1</span> -->
         шт
    </span>
    <button class="card-page__btn-plus">+</button>
</div>

SASS
.card-page
    &__count
        display: inline
        align-items: center
        justify-content: space-between
        border: 1px solid #828282
        padding: 7px 17px
        margin-bottom: 15px
        min-width: 110px
        &__span
            display: inline-block
            font-size: 18px
            line-height: 18px
            color: #000000
            margin: 0 4px
            &__responce
                font-size: 18px
                line-height: 18px
                color: #000000
                border: none
    &__btn-minus, &__btn-plus
        border: none
        background-color: transparent
        font-size: 20px
        line-height: 18px
        cursor: pointer
        color: #000000
        width: 10px

Answer 1

Если, как Вы говорите, раньше всё работало, то зачем же ломать? Последствия таких экспериментов, трудно поддаются лечению и часто не приносят положительных результатов. Потому, единственный выход - "костыли" из скриптов:

Для моноширинных шрифтов:

.card-page__count {
  display: inline;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #828282;
  padding: 7px 17px;
  margin-bottom: 15px;
  min-width: 110px;
}

.card-page__count__span {
  display: inline-block;
  font-size: 18px;
  line-height: 18px;
  color: #000000;
  margin: 0 4px;
}

.card-page__count__span__responce {
  font-family: monospace;
  font-size: 18px;
  line-height: 18px;
  color: #000000;
  border: none;
  min-width: 3ch;
  width: 3ch;
  text-align: center;
}

.card-page__btn-minus,
.card-page__btn-plus {
  border: none;
  background-color: transparent;
  font-size: 20px;
  line-height: 18px;
  cursor: pointer;
  color: #000000;
  width: 10px;
}

<div class="card-page__count">
  <button class="card-page__btn-minus">-</button>
  <span class="card-page__count__span">
    <input type="number" class="card-page__count__span__responce" value="1" oninput="this.style.width = this.value.length + 2 + 'ch'"> шт
  </span>
  <button class="card-page__btn-plus">+</button>
</div>

Для произвольных шрифтов:

.card-page__count {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #828282;
  margin-bottom: 15px;
  min-width: 110px;
}

.card-page__count__span {
  position: relative;
  display: inline-block;
  margin: 0 4px;
  font: 18px/18px Arial;
  color: #000;
}

.card-page__count__span__responce {
  width: 1.53em;
  min-width: .83em;
  font: 18px/18px Arial;
  text-align: center;
  border: none;
  color: #000;
}

.card-page__count__span__responce + span {
  position: absolute;
  top: 0; left: 0;
  min-width: .83em;
  padding: 2px .877em 3px 2px;
  font: 18px/18px Arial;
  pointer-events: none;
  opacity: 0;
}

.card-page__btn-minus,
.card-page__btn-plus {
  width: 20px;
  padding: 0;
  border: none;
  font: 20px/20px Arial;
  background-color: transparent;
  color: #000;
  cursor: pointer;
}

<div class="card-page__count">
  <button class="card-page__btn-minus">-</button>
  <span class="card-page__count__span">
    <input type="number" class="card-page__count__span__responce" value="1" oninput="this.nextElementSibling.textContent = this.value; this.style.width = this.nextElementSibling.clientWidth + 'px'"> шт
    <span>1</span>
  </span>
  <button class="card-page__btn-plus">+</button>
</div>

БЛОГ НА HUSL

Инпут в ширину зависящий от содержимого

Ответы (1 шт):