如何使输入占用flex容器中的所有剩余宽度？

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?

Answer 1

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> 

Answer 2

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.