using flex auto calculate the width for inline input fields-CodePudding

I am trying to have n number of input fields ranging from 1 to 10, so currently i am doing with width of 30px, but i wan't it to automatically calculate and avoid the horizontal scroll

How can i achieve this using flex.

.container {
  padding: 0;
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  flex-wrap: nowrap;
  width: 100%;
}

.input {
    width: 30px;
    height: 2rem;
    text-align: center;
    border: none;
    border-bottom: 1px solid #ccc;
    margin-right: 6px;
    padding: 0 16px;
}

<div >
  <input type="number"  value="">
  <input type="number"  value="">
  <input type="number"  value="">
  <input type="number"  value="">
  <input type="number"  value="">
  <input type="number"  value="">
</div>

Any help is appreciated

CodePudding user response：

You can use a width: 100% in the inputs and it is enough. I leave the example below:

.container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 24px;
  padding: 0;
}

.input {
    width: 100%;
    height: 2rem;
    margin-right: 6px;
    text-align: center;
    border: none;
    border-bottom: 1px solid #ccc;
}

<div >
  <input type="number"  value="">
  <input type="number"  value="">
  <input type="number"  value="">
  <input type="number"  value="">
  <input type="number"  value="">
  <input type="number"  value="">
</div>

And to leave separation between the elements, you have the option to replace padding: 0 16px; by gap: 8px;.

The result is the same, but in my opinion the code is much more understandable.

CodePudding user response：

Can you please change width:30px and add flex-basis:100%;

https://www.w3schools.com/cssref/css3_pr_flex-basis.asp