title: How to make an input field as wide as possible inside a menu item in a top menu using semantic-ui-react
body: <p>I have a header for my app. And it is a menu with many items. I have a menu.item which wraps an input field (its purpose is to search the given input site-wide). I want that menu.item to be as wide as the remaining space with input field as its children. My problem is very similar to <a href="http://forums.semantic-ui.com/t/how-to-make-menu-item-100-width/131" rel="nofollow noreferrer">this</a> visually. And yes, I have tried fluid prop in many permutations, unfortunately it did not help. Any help or insight on this problem? My Sample code is below and related codepen is <a href="https://codepen.io/milkers/pen/EEyxGx" rel="nofollow noreferrer">here</a>.</p>
  
  <pre><code>&lt;Menu inverted={true} fixed="top" size="small" color="violet"&gt;
  
    &lt;Menu.Item as="a" header={true} &gt;
      &lt;Icon inverted={true} size="big" name="image" /&gt;
    &lt;/Menu.Item&gt;
  
    &lt;Container fluid={true}&gt;
      &lt;Menu.Item &gt;
        &lt;Input
          inverted={true}
          transparent={true}
          icon="search"
          iconPosition="left"
          placeholder="Search.."
        /&gt;
      &lt;/Menu.Item&gt;
    &lt;/Container&gt;
  
    &lt;Menu.Item as="a" header={true} position="right"&gt;
      &lt;Icon inverted={true} size="big" name="mail" /&gt;
    &lt;/Menu.Item&gt;
  
  &lt;/Menu&gt;
  </code></pre>