MrBuggy MrBuggy - 5 months ago 8
CSS Question

Make height of input and div equal to their parent

Hi I've got follow 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>





I thought, when I give a hardcoded height to my wrapper div (in the example 25px) and then
height: 100%;
to his child-elements, they would flex correctly and have the same height.

But in my snippet, my input is higher than my div.

If I remove the height from the wrapper div and give the input a height 23px and to the child-div 25px, it works. But I would like to set it a little bit dynamically.

It should look like this:

enter image description here

How can I do this?

Thanks and cheers.

Answer

The problem is default padding of input element so you can just add box-sizing: border-box and keep padding inside height of element.

.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>