Предотвращение роста гибкого элемента вместе с контентом

Question

У меня проблемы с предотвращением увеличения поля значения даты (а не метки даты), если пользователь вводит больше содержимого, чем обычная дата (20-Jan-2020).

То же самое с полями для Rack No.: и Serial No.:.

Как мне это исправить? Я не хочу, чтобы эти поля расширялись. Я готов что-то изменить, поскольку это еще не было реализовано.

Пример дизайна

body,
input {
  font-family: "roboto";
  font-size: 13px;
  color: rgba(0, 0, 0, 0.72);
  fill: rgba(0, 0, 0, .72);
  /*color:#5F6368;*/
  font-weight: 500;
  font-smoothing: antialiased;
}

.container {
  display: flex;
  margin-bottom: 5px;
}

.b {
  flex: 0 0 auto;
  border: 1px solid #ccc;
}

.b-n {
  flex: 1 0 auto;
  padding-left: 5px;
  border: 1px solid #ccc;
  outline: none;
}

.date-a {
  flex: 0 0 auto;
  outline: none;
  border: 1px solid #ccc;
}

.date-b {
  flex: none;
  flex: 0 0 76px;
  text-wrap: none;
  outline: none;
  padding-left: 5px;
  max-width: 76px;
  flex-direction: column;
  border: 1px solid #ccc;
}

.v-h-n {
  flex: 0 1 auto;
  border: 1px solid #ccc;
}

.v-n-m {
  flex: 0 0 100px;
  padding-left: 5px;
  border: 1px solid #ccc;
}

.sr-n-l {
  flex: 0 auto;
  outline: none;
  border: 1px solid #ccc;
}

.sr-n {
  flex: 0 0 250px;
  outline: none;
  border: 1px solid #ccc;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap" rel="stylesheet">

<div class="inv">
  <div class="container">
    <div class="b">Label:</div>
    <div class="b-n" contenteditable>Microsoft</div>
    <div class="date-a">Date:</div>
    <div class="date-b" contenteditable>31-Dec-2019</div>
  </div>
  <div class="container" style="border-bottom:1px solid #ccc">
    <div class="v-h-n">Rack No.:</div>
    <div class="v-n-m" contenteditabl>AA19MG2360</div>
    <div class="sr-n-l">Serial No.:</div>
    <div class="sr-n" contenteditable style="padding-left:5px;">224855722</div>
  </div>
</div>

Answer 1

Вы можете использовать свойство flex-grow для обработки этого. Попробуйте flex-grow: 0 для вашего дочернего элемента, чтобы предотвратить рост с его родителем.

См. этот пример на Codepen