button {
border:0;
display: inline;
font: inherit;
}input[type="text"] {
flex: 1 0 auto;
}button {
background: #003;
color: whitesmoke;
display: block;
text-align: center;
flex: 0 0 110px;
}Remember the Prefix for WebKit-based Browsers
JustareminderthatsomerecentversionsofWebKitbrowsersrequirea-webkit-
prefixforflexboxproperties.Forthosebrowsers,justify-contentneedstobe
-webkit-justify-contentandflexshouldbe-webkit-flex.Herewe’veusedflex: 1 0 autoforourinputelement.Sinceitsflex-growvalue
is 1 ,itwillgrowtofilltheavailablespaceofitsparent.Forthebuttonelement,
however,we’veusedflex: 0 0 110px.The 0 valuesforflex-growandflex-
shrinkpreventthewidthofthebuttonfromincreasingordecreasing,whilethe
flex-basisvalueof110pxsetsitswidth.AsyoucanseeinFigure4.42,ourbuttonremainsthesamesize,butthewidthof
inputexpandstofilltheremainingspace.178 CSS Master