Preventing a flex item from growing with content

Question

I'm having trouble in preventing the date value field (not the date label) from growing if a user types in more content than a normal date (20-Jan-2020).

It's the same with the fields for Rack No.: and Serial No.:.

How do I get this correct? I don't want those fields from expanding. I'm willing to change things since this hasn't been implemented yet.

Sample Design

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

You can use flex-grow property to handle this. Try flex-grow: 0 for your child element to prevent growing with it's parent.

See this example on Codepen