semantic-ui fluid full-width input in a menu - css

Question

I have a fixed top menu with an image on the left, an input to it's right and another input on the far right. I want the center input to stretch to fill all remaining space between the image and the other input.
Normally in semantic-ui I'd consider a fluid input, but that doesn't seem to work at all inside a semantic-ui menu. When 'fluid' is applied the input becomes smaller.
How can I get the center input to stretch to full-width between the other two? Is there a way to do this with just semantic-ui?
<div class="ui fixed borderless menu">
<div class="header">
<a href="/" class="">
<img src="logo.png">
</a>
</div>
<div class="item">
<div class="ui left icon input">
<i class="search icon"></i>
<input type="text" placeholder="search">
</div>
</div>
<div class="right item">
<div class="ui left icon input">
<i class="map outline icon"></i>
<input type="text" placeholder="location">
</div>
</div>
</div>

Answer 1

You can set flex-grow to 1 for the item's css style.
<div class="category search item" style="flex-grow:1;">
<div class="ui icon input">
<input class="prompt" placeholder="Search..." type="text">
<i class="search link icon"></i>
</div>
<div class="results"></div>
</div>
Tested and Work with Semantic UI 2.2.13

Answer 2

Set the display property of the elements to display: inline-block.
Set the width properties for the elements to relative values, i.e. use percents instead of pixels.
Set the values of the width properties for the elements so that they add up to 100%.
Remove any extra margins and/or padding from the page.
* {
margin: 0;
padding: 0;
}