Problem leaving automatic field width in responsive layout

Question

I have the following situation. I’m working on a responsive layout that features three columns, left sidebar, center and right... It turns out that inside the right sidebar there is a text field and beside there must be an Submit button... That button can never break the line, so I used in the div (inside the sidebar) where is this form the property white-space: nowrap;

The problem is that I would like the button element to be fixed in its width and the text field to be flexible, but when the dimensions become varied this does not happen, or it grows too much, bursting the layout or becomes too small, leaving space inside the sidebar. Is there any way to fix this?

the code is as follows::

div#sidebar {
  width: 23%;
}

div#sidebar div#searchbox {
  display: block;
  padding: 3px 5px;
  margin-bottom: 4px;
  white-space: nowrap;
}

div#sidebar div#searchbox input[type="text"] {
  width: 100%;
}

div#sidebar div#searchbox input[type="submit"] {
  width: 85px;
}

HTML:

<div id="sidebar">
   <div id="searchbox">
       <input type="text" name="query" />
       <input type="submit" name="btn-submit" />
   </div>
</div>

Answer 1

Look at this example where I use a table to achieve your goal:

table{
    width: 100%;
}
td{
    border: 0;
    padding: 0 5px 0 5px;
    margin: 0 5px 0 5px;
}
input[type="submit"], input[type="text"] {
    width: 100%;
}
.parse{
     min-width: 70px;
     width: 70px;   
}
.full{
    width: 1fr;   
    min-width: 100px;
}

<table>
    <tr>
        <td class="full" >
            <input type="text">
        </td>
        <td  class="parse" >
            <input type="submit">
        </td>
    </tr>
</table>

Use of table is justified on account of property width, with the attribute 1fr. This attribute causes the column (or row) to which it is applied to to to have the remainder of the screen size, taking into account the other columns.

With that just put the inputs with width: 100% and the size of them you choose by applying the min-width in the columns in which they are.

Try resizing in Jsfiddle: https://jsfiddle.net/SamirChaves/nvavm90z/2/.

Answer 2

I changed the html structure a little to get the final result, but here it worked well.

    #sidebar {
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
        border: 2px solid red;
        width: 50%;
    }

<div id="sidebar">
    <div style="width: 100%;">
        <input type="text" name="query" style="width: 100%;" />
    </div>
    <div style="border: 2px solid blue;">
        <input type="submit" name="btn-submit" />
    </div>
</div>

Answer 3

Since you are making a layout responsive, You should think responsibly. When the screen is too small for your sidebar to behave as it should, use an off-canvas sidebar (search for it) or make it appear above the central content.