Flex-grow behaviour on input is different in browsers

Question

I want to create an inline form which uses 100% width of its parent container and expands the input to fill any unused space.

The code I came up with: https://jsfiddle.net/k8Lbm1we/

.container {
  width: 500px;
  background-color: #CDCDCD;
  padding: 15px;
}

.form-inline-expanded {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
 }

    .form-inline-expanded input {
       flex-grow: 1;
       //width: 100%;
    }
   
    .form-inline-expanded .no-wrap {
        flex-shrink: 0;
    }
    
    .form-inline-expanded *:not(:first-child) {
        margin-left: 3px;
    }
}

<div class="container">
<div class="form-inline-expanded">
    <input />
    <select>
            <option>&lt;</option>
            <option>&lt;=</option>
            <option>=</option>
    </select>
    <span class="no-wrap">Plan Duration [d]</span>
    <select>
            <option>&lt;</option>
            <option>&lt;=</option>
            <option>=</option>
    </select>
    <input />
</div>
</div>

Firefox works as expected. Chrome and Edge expands beyond the parent container.

If I replace the flex-grow: 1 with width: 100% it works in Chrome but Firefox displays the dropdowns to small and Edge does not take the margin into account.

What is the issue here?

Please put your code into a snippet here in case your link breaks. That way future users can benefits from the post. — jarrodwhitley, Mar 18 '19 at 15:27
add `min-width: 0` to your `input`s - see https://jsfiddle.net/41jg5omf/ — kukkuz, Mar 18 '19 at 15:28
https://stackoverflow.com/questions/46684636/html-inputs-ignore-flex-basis-css-property — kukkuz, Mar 18 '19 at 15:34
Thanks. This was a qucik fix I looked way to long into. Anyway I can mark your comment as the answer? — Tom, Mar 18 '19 at 15:35

Flex-grow behaviour on input is different in browsers

0 Answers0