Geek Answers Handbook

Make input height and div equal to their parent

I have the following code:

.wrapper {
  display: flex;
  height: 25px;
}
.myInput {
  width: 50px;
  height: 100%;
  border: 1px solid grey;
  border-right: none;
}
.myInputAddon {
  width: 25px;
  height: 100%;
  background-color: green;
  border: 1px solid green;
}
<div class="wrapper">
  <input class="myInput">
  <div class="myInputAddon" type="number"></div>
</div>
Run codeHide result

I thought that when I give a hard-coded height to my wrapper div (in the example 25px) and then height: 100%;to my children, they will flex flex and have the same height.

But in my fragment, my input is above my div.

If I remove the height from the div wrapper and give an input size of 23px and a child div of 25px, it works. But I would like to install it a bit dynamically.

It should look like this:

enter image description here

How can i do this?

Thank you and welcome.

+4
source share
2 answers

, box-sizing: border-box .

.wrapper {
  display: flex;
  height: 25px;
}
.wrapper * {
  box-sizing: border-box;
}
.myInput {
  width: 50px;
  height: 100%;
  border: 1px solid grey;
  border-right: none;
}
.myInputAddon {
  width: 25px;
  height: 100%;
  background-color: green;
  border: 1px solid green;
}
<div class="wrapper">
  <input class="myInput">

  <div class="myInputAddon" type="number"></div>
</div>
Hide result
+3

input :

enter image description here

:

.wrapper {
  display: flex;
  height: 25px;
}
.myInput {
  width: 50px;
  height: 100%;
  border: 1px solid grey;
  border-right: none;
  box-sizing: border-box; /* NEW; padding and border now absorbed into height:100% */
}
.myInputAddon {
  width: 25px;
  height: 100%;
  background-color: green;
  border: 1px solid green;
  box-sizing: border-box; /* NEW */
}
<div class="wrapper">
  <input class="myInput">
  <div class="myInputAddon" type="number"></div>
</div>
Hide result
+1

More articles:


All Articles