Text input and button stay 100% width of parent (Flexbox)

HTML

<h1>Short Word</h1>
<section class="flexbox">
        <div class="stretch">
            <input type="text" placeholder="Search..." />
        </div>
        <div class="normal">
            <button>Search</button>
        </div>
</section>

<h1>Long Word</h1>
<section class="flexbox">
        <div class="stretch">
            <input type="text" placeholder="Search..." />
        </div>
        <div class="normal">
            <button>Super Long Word For Search Button With Flexbox!</button>
        </div>
</section>

CSS

/* Reset
**************************************************************************/
* { box-sizing: border-box; margin: 0; padding: 0; }
body { margin: 1rem; }
h1 { margin: 2rem 0 0; }


/* Flexbox Example 
**************************************************************************/
.flexbox { display: flex; }
.flexbox .stretch { flex: 1; }
.flexbox .normal { flex: 0; margin: 0 0 0 1rem; }
.flexbox div input { padding: .5em 1em; width: 100%; }
.flexbox div button { padding: .5em 1em; white-space: nowrap; }