title: Width of Input inside SAPUI5 FlexBox
body: <p>Trying to extend the width of an Input inside a FlexBox container. I'd like it to be same width as parent container. This is my view.xml:</p>
  
  <pre><code>&lt;mvc:View xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"&gt;
      &lt;l:VerticalLayout id="idVL" class="sapUiContentPadding" width="100%"&gt;
          &lt;l:content&gt;
              &lt;Panel id="idPnl"&gt;
                  &lt;FlexBox id="idFB"&gt;
                      &lt;Input id="idInput"&gt;...&lt;/Input&gt;
                  &lt;/FlexBox&gt;
              &lt;/Panel&gt;
          &lt;/l:content&gt;
      &lt;/l:VerticalLayout&gt;
  &lt;/mvc:View&gt;
  </code></pre>
  
  <p>Inspecting the page in the browser reveals that the parent FlexBox actually extends to the width set in VerticalLayout. However, SAPUI5 automatically creates a sub-div, which doesn't extend to the whole width, and places the input inside <em>that</em>:</p>
  
  <pre><code>&lt;div id="xxxxx---view--idFB" data-sap-ui="..." class="..."&gt; //This is the parent FlexBox, it extends to the size of VerticalLayout element.
      &lt;div id="__data4" style="order:0;flex-grow:0;flex-shrink:1;..." class="..."&gt; //This sub-FlexBox is created automatically, and is smaller than it's parent.
          &lt;div id="xxxxx---view--idInput ...&gt; //The input is placed here.
              ...
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I could be wrong but I suspect "flex-grow:0" is the culprit and I can't find a way to access this property. I tried setting it in css inside #idFB which didn't work. Also tried setting it inside some of those classes used by the sub-div (like ".sapMFlexItem"), also didn't work. Tried setting each container's width to 100%, also doesn't work. The documentation doesn't mention anything about manually setting flex properties.</p>
  
  <p>How can I set flex-grow to 1, or by some other method make the input extend to the same width of VerticalLayout?</p>
  
  <p>Note: I'm not 100% sold on using a FlexBox here; I just don't know of any other container I can use to place an input and button inside of, and programatically insert more of in the page, ie:</p>
  
  <p>controller.js:</p>
  
  <pre><code>addInput: function () {
      var oInput = this.byId("idInput").clone();
  
      var delButton = new sap.m.Button({
          icon: "sap-icon://delete",
          press: this.deleteInput
      });
  
      var _oLayout = new sap.m.FlexBox({  // Some other better container?
          items: [oInput, delButton]
      });
      this.byId("idPnl").addContent(_oLayout);
  }
  </code></pre>