Flexbox - Расти этикетку относительно поля, используя flex-grow, усадку, основу

Question

У меня длинная метка без пробелов в div.Смотрите скриншот.Этикетка может расти или уменьшаться в зависимости от локализации.Я хочу, чтобы размер этикетки увеличился до необходимого, чтобы поле стало меньше.Поле div должно иметь гибкую основу 60% для подтверждения другим полям выше и ниже его, хотя оно должно уменьшаться, если метка должна расти.В настоящее время есть наложение, как на скриншоте (или обрезается, если я применяю переполнение: скрытое к div метки).

Я попытался поработать с различными значениями для flex-grow и flex-shrink до noпомогло.Я не думаю, что эти атрибуты - это то, что мне нужно для достижения этой цели, но я не уверен.

HTML:

<div class="class-flex">
    <div class="label-column">
        I'mALongLabelWithNoSpaces:
    </div>
    <div class="field-column">
        <!-- input field which should shrink goes here -->
    </div>
</div>

CSS:

.class-flex {
    display: flex;
}

.label-column {
    display: flex;
    flex-basis: 40%;
    align-items: center;
    padding: 3px 0 3px 5px;
}

.field-column {
    display: flex;
    flex-basis: 60%;
    padding: 3px 7px 3px 5px;
    align-items: center;
}

Answer 1

Хитрость здесь в том, чтобы использовать flex-basis из 60% на входном элементе div, но разрешить его сжатие с помощью flex-shrink:1, но не увеличивать, задав flex-grow:0.

. Это можно установить с помощьюединственное свойство flex: 0 1 60%;

, затем мы устанавливаем ввод шириной 100% ... и разделяем два div, используя justify-content:space-between.

Таким образом, у метки div нет заданной ширины ирасширяется по мере необходимости, входной div начинается с 60%, но может только уменьшаться.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.class-flex {
  display: flex;
  width: 400px;
  border: 1px solid red;
  margin: 1em auto;
  justify-content: space-between;
}

.label-column {
  display: flex;
  align-items: center;
  padding: 3px 0 3px 5px;
}

.field-column {
  display: flex;
  flex: 0 1 60%;
  align-items: center;
  padding: 3px 0;
}

input {
  width: 100%;
}

<div class="class-flex">
  <div class="label-column">
    I'mALongLabelWithNoSpaces:
  </div>
  <div class="field-column">
    <input type="text">
  </div>
</div>

<div class="class-flex">
  <div class="label-column">
    Label:
  </div>
  <div class="field-column">
    <input type="text">
  </div>
</div>