cssflexboxhtml-input

flex not respected by Input why?

I've noticed the 'input' element does not stretch or shrink to fill a flex container. Does anyone know why and if there is a solution?

My example below shows the container class c being used on Div elements (which stretch properly). And a single class e, used for the right-justified fixed-length end. The row of divs stretch and shrink as expected, the row of inputs do not.

div.c {
  display: flex;
  flex-direction: row;
  align-content: stretch;
}

div.d {
  flex: 1;
}

div.e {
  display: inline-block;
  flex: 0 0 30px;
  background-color: red;
}
<div class='c'>
  <div class='d'>A</div>
  <div class='d'>B</div>
  <div class='d'>C</div>
  <div class='d'>D</div>
  <div class='e'>E</div>
</div>

<div class='c'>
  <input class='d'></input>
  <input class='d'></input>
  <input class='d'></input>
  <input class='d'></input>
  <div class='e'></div>
</div>

note i am aware of this link:

input / button elements not respecting flex-grow

However using min-width: 0; box-sizing: border-box; has no effect for me.

Solution

  • Because you specified div.d not input.d or div .d or just .d. Also, no need to close the input tag.

    div.c {
  display: flex;
  flex-direction: row;
  align-content: stretch;
}

.d {
  flex: 1;
}

div.e {
  display: inline-block;
  flex: 0 0 30px;
  background-color: red;
}
    <div class='c'>
  <div class='d'>A</div>
  <div class='d'>B</div>
  <div class='d'>C</div>
  <div class='d'>D</div>
  <div class='e'>E</div>
</div>

<div class='c'>
  <input class='d'>
  <input class='d'>
  <input class='d'>
  <input class='d'>
  <div class='e'></div>
</div>