How to make input to take all remaining width in flex container?

Question

I'm trying to create a simple numeric selector that will be used for mobile and desktop users. My idea is to have an input surrounded by "plus" and "minus" buttons.

Everything works fine except the responsiveness of the input field. Somehow, it doesn't shrink to the container remaining size.

So, what I would like to have is fixed-size spans (2 rem in my case) around the input that takes all the remaining width of the container.

Here is the code:

body {
  background: #f5f5f5;
}

.outer-container {
  width: 300px;
  border: 1px solid gray;
  padding: 10px;
}

.container {
  display: inline-flex;
  align-items: center;
}

.item {
  dsipaly: inline-block;
  height: 2rem;
  width: 2rem;
  font-size: 2rem;
  line-height: 2rem;
  border: 1px solid black;
  border-radius: 50%;
  text-align: center;
}

input {
  font-size: 2rem;
  margin: 0 10px;
}

<div class="outer-container">
  <div class="container">
    <span class="left item">-</span>
    <input type="text" />
    <span class="right item">+</span>
  </div>
</div>

I've created a layout that uses flexbox but input doesn't shrink and overflows the container.

Is it possible to make an input to shrink to take all available container width without overflowing container on X axis?

Temani Afif · Accepted Answer · 2018-04-07T09:45:37.567

6

You can try this:

body {
  background: #f5f5f5;
}

.outer-container {
  width: 300px;
  border: 1px solid gray;
  padding: 10px;
}

.container {
  display: inline-flex;
  align-items: center;
}

.item {
  height: 2rem;
  width: 2rem;
  font-size: 2rem;
  line-height: 2rem;
  border: 1px solid black;
  border-radius: 50%;
  text-align: center;
}

input {
  font-size: 2rem;
  margin: 0 10px;
  min-width:0; /* Remove the automatic minimum size set so the element can shrink*/
  width: 87%; /* Set any value of width here as reference*/
  flex: 1; /* make the item grow to fill the remaining space */
}

<div class="outer-container">
  <div class="container">
    <span class="left item">-</span>
    <input type="text" >
    <span class="right item">+</span>
  </div>
</div>

edited Apr 07 '18 at 09:45

answered Apr 07 '18 at 09:29

Temani Afif

245,468
26
309
415

@Alohci yes forget the min-width ;) fixed – Temani Afif Apr 07 '18 at 09:34
Wow, this looks really interesting. So, you've made `input` flex container itself, so it took all available space, right? – WhiteAngel Apr 07 '18 at 09:36
@WhiteAngel no, i simply added some property to the input ... first you have to set min-width:0 as the input has min-width already set, then you make it take 100% of width of the container, and by setting flex:1 you make it shring to leave space to the other element ;) – Temani Afif Apr 07 '18 at 09:38
@WhiteAngel check this : https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size to understand more about the min-width trick – Temani Afif Apr 07 '18 at 09:41
Great! Thank you very much! Exactly what I was looking for! Good job! Now it's clear) – WhiteAngel Apr 07 '18 at 09:41

score 1 · Answer 2 · answered Apr 07 '18 at 09:22

1

Your issue can be fixed if you add width property to input element with calc() method in its value. Try this code.

input {
    font-size: 2rem;
    margin: 0 10px;
    width: calc(100% - 4rem - 32px);
}

I collected this css property from your codepen link.

answered Apr 07 '18 at 09:22

Aryan Twanju

2,464
1
9
12

Thank you for your solution but `calc()` is something I wanted to avoid. For me it looks more like a hack, no? Isn't it possible to make it just with a flex-box? – WhiteAngel Apr 07 '18 at 09:27

How to make input to take all remaining width in flex container?

2 Answers2