CODEWITHSUNDEEP
htmlcss
pileup
pileup

Reputation: 3262

How to make 2 inputs fill remaining parent width with equal widths?

I want to style a div as a time input. I wrap 2 inputs with a div, and place another colon div in the middle.

I tried to set the inputs' flex-grow to be 1 so that they will grow at the same width. They do seem to be the same width, but they overflow their parent.

How can I make them same width but also fit their parent?

#wrapper {
  display: flex;
  width: 200px;
  border: 1px solid red;
}

input {
  display: flex;
  border: none;
  flex-grow: 1;
}
<div id="wrapper">
  <input type="text" id="left">
  <div id="middle">:</div>
  <input type="text" id="right">
</div>

Upvotes: 0

Views: 23

Answers (1)

Dhia
Dhia

Reputation: 442

Try this:

#wrapper {
  display: flex;
  width: 200px;
  border: 1px solid red;
}

input {
  display: flex;
  border: none;
  width: 50%;
  flex-grow: 1;
}
<div id="wrapper">
  <input type="text" id="left">
  <div id="middle">:</div>
  <input type="text" id="right">
</div>

Explanation:

I simply added width: 50%; to the input fields so they take half of their parent width.

Upvotes: 0

Related Questions