使输入和div的高度等于其父级

Question

我有以下代码：

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

我想，当我给我的包装div（在示例中为25px）和然后height: 100%;给他的子元素提供硬编码高度时，它们会正确弯曲并具有相同的高度。

但在我的片段中，我的输入高于我的div。

如果我从包装div中删除高度并将输入高度设置为23px并将其输入到child-div 25px，则可以正常工作。但我想动态地设置它。

它应该是这样的：

我该怎么做？

谢谢和欢呼。

Answer 1

输入元素的问题是默认填充，因此您只需添加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>

Answer 2

input元素具有浏览器的默认样式：

进行以下调整：

＆＃13;

＆＃13;

.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 */
}

＆＃13;

<div class="wrapper">
  <input class="myInput">
  <div class="myInputAddon" type="number"></div>
</div>

＆＃13;

＆＃13;

＆＃13;