Сделайте высоту ввода и div равной их родителю

У меня есть следующий код:

.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-оболочки и дам вводу высоту 23 пикселя, а дочернему div 25 пикселей, это сработает. Но я хотел бы установить его немного динамичнее.

Это должно выглядеть так:

введите здесь описание изображения

Как я могу это сделать?

Спасибо и ура.


html css flexbox
person webta.st.ic    schedule 28.06.2016    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Проблема заключается в заполнении по умолчанию элемента ввода, поэтому вы можете просто добавить 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>

person Nenad Vracar    schedule 28.06.2016

arrow_upward
2
arrow_downward

Элемент input имеет стиль по умолчанию из браузера:

введите здесь описание изображения

Внесите следующие изменения:

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

person Michael Benjamin    schedule 28.06.2016