0

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>
ankitkanojia
  • 3,072
  • 4
  • 22
  • 35
Norman
  • 6,159
  • 23
  • 88
  • 141
  • What you mean for "growing"? From my testing your code works as you expect: the .sr-n div keep its with regardless its content. – thetont Jan 21 '20 at 12:10
  • 1
    Could you tell us what browser (version) you are using? And do you mean growing (horizontally) or text wrapping (which is what happens in my browser)? – Axel Köhler Jan 21 '20 at 13:01
  • I'm using the latest version Chrome. By growing I mean both horizontally and vertically. Type text in the date field other than a date, and it grows. I want that to remain a fixed size. – Norman Jan 21 '20 at 13:08

1 Answers1

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

Axel Köhler
  • 911
  • 1
  • 8
  • 34
Ahmed Abdelfattah
  • 469
  • 5
  • 12
  • Hey there, welcome to StackOverflow. I have not tested this but it seems like it would resolve the question. In future you could use something like https://codepen.io/ to show a live demo of your fix (since the OP provided full example code to test with). Thanks for helping answer questions :) Also one other thing is formatting of your answer, you can wrap the code inside of backticks to format it as a mini `inline code` block. – William Patton Jan 21 '20 at 12:05