flexbox - SAPUI5 FlexBox 内输入的宽度

Question

尝试扩展 FlexBox 容器内输入的宽度。我希望它与父容器具有相同的宽度。这是我的 view.xml:

<mvc:View xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
    <l:VerticalLayout id="idVL" class="sapUiContentPadding" width="100%">
        <l:content>
            <Panel id="idPnl">
                <FlexBox id="idFB">
                    <Input id="idInput">...</Input>
                </FlexBox>
            </Panel>
        </l:content>
    </l:VerticalLayout>
</mvc:View>

在浏览器中检查页面会发现父 FlexBox 实际上延伸到了 VerticalLayout 中设置的宽度。但是，SAPUI5 会自动创建一个子 div，该子 div 不会延伸到整个宽度，并将输入放置在其中:

<div id="xxxxx---view--idFB" data-sap-ui="..." class="..."> //This is the parent FlexBox, it extends to the size of VerticalLayout element.
    <div id="__data4" style="order:0;flex-grow:0;flex-shrink:1;..." class="..."> //This sub-FlexBox is created automatically, and is smaller than it's parent.
        <div id="xxxxx---view--idInput ...> //The input is placed here.
            ...
        </div>
    </div>
</div>

我可能是错的，但我怀疑“flex-grow:0”是罪魁祸首，而且我找不到访问此属性的方法。我尝试在 #idFB 内的 css 中设置它，但没有成功。还尝试将其设置在子 div 使用的一些类中(例如“.sapMFlexItem”)，也不起作用。尝试将每个容器的宽度设置为 100%，也不起作用。该文档没有提及任何有关手动设置 Flex 属性的内容。

如何将 flex-grow 设置为 1，或者通过其他方法使输入扩展到与 VerticalLayout 相同的宽度？

注意:我并不是 100% 同意使用 FlexBox；我只是不知道有任何其他容器可以用来在其中放置输入和按钮，并以编程方式在页面中插入更多内容，即:

Controller .js:

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);
}

Answer 1

想通了。需要将以下内容放置在输入中:

<Input>
    ...
    <layoutData>
        <FlexItemData growFactor="1"/>
    </layoutData>
</Input>