Html Question posted in
Some basic documentation can be found here.

Html – Input width not working on table display flex overflow hidden firefox

Inside an HTML table. I have an input with a display flex parent with a width. The input is overflow hidden. I get a different behavior between browsers. Chrome shrinks the input field to the width. Firefox does not.

If I put width:100% on the input it starts working on firefox but I would like to not add that style.

div {
  display: flex;
  width: 50px;
}

.myInput {
  overflow: hidden;
}
<table>
  <tr>
    <td>
      <div><input class="myInput" value="0.50"></div>
    </td>
    <td>test</td>
  </tr>

</table>

EDIT:
Filed a bug with Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1882139

Tags:

2

Answers


  1. 0

    I’d recommend setting min-width: 0; instead of overflow: hidden;.

    Who knows whether it is a bug or not, as it involves a table, flexbox, and replaced elements like an <input>, which has intrinsic dimensions.

    div {
  display: flex;
  width: 50px;
}

.myInput {
  min-width: 0;
}
    <table>
  <tr>
    <td>
      <div><input class="myInput" value="0.50"></div>
    </td>
    <td>test</td>
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    overflow: hidden needs to be on the parent element to hide the part of the input that overflows the parent’s width.

    div {
  display: flex;
  width: 50px;
  overflow: hidden;
}
    <table>
  <tr>
    <td>
      <div><input class="myInput" value="0.50"></div>
    </td>
    <td>test</td>
  </tr>

</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search