Style input element to fill remaining width of its container

Question

Let s say I have an html snippet like this    lt div style  width 300px   gt       lt label for  MyInput  gt label text lt  label gt       lt input type  text  id  MyInput    gt   lt  div gt    This isn t my exact code  but the important thing is there s a label and a text input on the same line in a fixed-width container   How can I style the input to fill the remaining width of the container without wrapping and without knowing the size of the label

User · Answer

you can try this     x000D   x000D  div panel   x000D      border solid  x000D      width 500px  x000D      height 300px  x000D    x000D  div content   x000D   height 90   x000D   background-color  1ea8d1    light blue   x000D    x000D  div panel input   x000D   width 100   x000D   height 10   x000D     make input doesnt overflow inside div   x000D   -webkit-box-sizing  border-box  x000D         -moz-box-sizing  border-box  x000D              box-sizing  border-box  x000D     make input doesnt overflow inside div   x000D    x000D   lt div id  panel  gt  x000D     lt div id  content  gt  lt  div gt  x000D     lt input type  text  placeholder  write here      gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

as much as everyone hates tables for layout  they do help with stuff like this  either using explicit table tags or using display table-cell   lt div style  width 300px  display table  gt       lt label for  MyInput  style  display table-cell  width 1px  gt label amp nbsp text lt  label gt       lt input type  text  id  MyInput  style  display table-cell  width 100     gt   lt  div gt

User · Answer

If you re using Bootstrap 4    lt form class  d-flex  gt     lt label for  myInput  class  align-items-center  gt Sample label lt  label gt     lt input type  text  id  myInput  placeholder  Sample Input  class  flex-grow-1   gt   lt  form gt    Better yet  use what s built into Bootstrap      lt form gt       lt div class  input-group  gt         lt div class  input-group-prepend  gt           lt label for  myInput  class  input-group-text  gt Default lt  label gt         lt  div gt         lt input type  text  class  form-control  id  myInput  gt       lt  div gt     lt  form gt    https   jsfiddle net nap1ykbr

User · Answer

Here is a simple and clean solution without using JavaScript or table layout hacks  It is similar to this answer  Input text auto width filling 100  with other elements floating  It is important to wrap the input field with a span which is display block  Next thing is that the button has to come first and the the input field second   Then you can float the button to the right and the input field fills the remaining space    x000D   x000D  form   x000D      width  500px  x000D      overflow  hidden  x000D      background-color  yellow  x000D    x000D  input   x000D      width  100   x000D    x000D  span   x000D      display  block  x000D      overflow  hidden  x000D      padding-right 10px  x000D    x000D  button   x000D      float  right  x000D    x000D   lt form method  post  gt  x000D        lt button gt Search lt  button gt  x000D        lt span gt  lt input type  text  title  Search    gt  lt  span gt  x000D   lt  form gt  x000D   x000D   x000D    A simple fiddle  http   jsfiddle net v7YTT 90   Update 1  If your website is targeted towards modern browsers only  I suggest using flexible boxes  Here you can see the current support   Update 2  This even works with multiple buttons or other elements that share the full with with the input field  Here is an example

User · Answer

Very easy trick is using a CSS calc formula  All modern browsers  IE9  wide range of mobile browsers should support this    lt div style  white-space nowrap  gt     lt span style  display inline-block width 80px font-weight bold  gt       lt label for  field1  gt Field1 lt  label gt     lt  span gt     lt input id  field1  name  field1  type  text  value  Some text  size  30  style  width calc 100  - 80px     gt   lt  div gt

User · Answer

I suggest using Flexbox   Be sure to add the proper vendor prefixes though   x000D   x000D  form   x000D    width  400px  x000D    border  1px solid black  x000D    display  flex  x000D    x000D   x000D  input   x000D    flex  2  x000D    x000D   x000D  input  label   x000D    margin  5px  x000D    x000D   lt form method  post  gt  x000D     lt label for  myInput  gt Sample label lt  label gt  x000D     lt input type  text  id  myInput  placeholder  Sample Input   gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Easiest way to achieve this would be    CSS    label  float  left     span       display  block      overflow  hidden      padding-right  5px      padding-left  10px     span  gt  input  width  100       HTML     lt fieldset gt       lt label gt label lt  label gt  lt span gt  lt input type  text    gt  lt  span gt       lt label gt longer label lt  label gt  lt span gt  lt input type  text    gt  lt  span gt   lt  fieldset gt    Looks like   http   jsfiddle net JwfRX

User · Answer

Please use flexbox for this  You have a container that is going to flex its children into a row  The first child takes its space as needed  The second one flexes to take all the remaining space    x000D   x000D   lt div style  display flex flex-direction row  gt  x000D       lt label for  MyInput  gt label amp nbsp text lt  label gt  x000D       lt input type  text  id  MyInput  style  flex 1    gt  x000D   lt  div gt  x000D   x000D   x000D

[html] Style input element to fill remaining width of its container

Examples related to html

Examples related to css