css предотвратить увеличение родительского роста

Question

как я могу предотвратить увеличение родительского роста в css ??

это моя html структура:

  <div class="tab-box">
    <div class="tab-box__icon">
      <font-awesome-icon
        v-else-if="icon"
        :icon="['far', 'user']"
        class="tab-box__icon--font-awesome"
      />
    </div>

    <div class="tab-box__content">
      <div class="tab-box__content--title">{{ title }}</div>
      <div v-if="!isVisible" class="tab-box__content--subtitle">
        {{ subtitle }}
      </div>

      <!--  input  -->
      <input
        v-else
        :ref="refName"
        v-model="text"
        type="text"
        :placeholder="subtitle"
        class="tab-box__content--input"
      />
      <!--  /input  -->
    </div>
  </div>

я отображаю субтитры или ввод на основе isVisible: false данных.

и, наконец, это результат:

, и это Мой стиль:

.tab-box {
  padding: calculate-rem(20px);
  background: #fff;
  display: flex;
  align-items: center;
  text-align: left;

  &__content {
    &--title {
      color: $color--primary;
      font-weight: bold;
    }

    &--subtitle {
      color: #848484;
      @include font-size(14px);
      line-height: calculate-rem(17px);
    }

    &--input {
      border: 0;
      width: 100%;
      @include font-size(14px);
      line-height: calculate-rem(17px);
    }
  }
}

Примечание : calculate-rem - это функция, которая конвертирует px в rem.

как я могу исправить проблему с высотой (или высотой строки) ввода ???

это демо на jsfiddle

Answer 1

Поскольку вы изменяете <div> на <input> элемент, он становится формулирующим содержанием . Так что просто сделайте его блоком, добавив:

&--input {
    display: block;
}