textbox width=100% display not correctly in flex mode

[aljcn]

See next code:

Code:

    <div style="width:800px;display:flex;">
        <div style="margin:2px;flex-grow:1;border:1px solid red;">
          <input type="text" style="width:100%;min-width:0;" />
        </div>
        <div style="margin:2px;flex-grow:1;border:1px solid blue;"> 
            <input type="text" style="width:100%;min-width:0;" />
        </div>
    </div>

    <div style="width:800px;display:flex;">
        <div style="margin:2px;flex-grow:1;border:1px solid red;">
          <input class="easyui-datebox" data-options="" style="width:100%;">
        </div>
        <div style="margin:2px;flex-grow:1;border:1px solid blue;"> 
            <input class="easyui-datebox" data-options="" style="width:100%;">
        </div>
    </div>

in first row, two input each space 50% width as experted.

but in second row, textbox not show correctly

it seams some bug in textbox render...

[jarry]

Please call this code instead.

Code:

    <div style="width:800px;display:flex;">
        <div style="margin:2px;flex:1;border:1px solid red;">
          <input class="easyui-datebox" data-options="" style="width:100%;">
        </div>
        <div style="margin:2px;flex:1;border:1px solid blue;">
            <input class="easyui-datebox" data-options="" style="width:100%;">
        </div>
    </div>

[aljcn]

still has some bug in display with container width is adjust to small such as 300px:

Code:

    <div style="width:300px;display:flex;">
        <div style="margin:2px;flex:1;border:1px solid red;">
          <input type="text" style="width:100%;" />
        </div>
        <div style="margin:2px;flex:1;border:1px solid blue;">
            <input type="text" style="width:100%;" />
        </div>
    </div>

    <div style="width:300px;display:flex;">
        <div style="margin:2px;flex:1;border:1px solid red;">
          <input class="easyui-datebox" data-options="" style="width:100%;">
        </div>
        <div style="margin:2px;flex:1;border:1px solid blue;">
            <input class="easyui-datebox" data-options="" style="width:100%;">
        </div>
    </div>

datebox width has overflow, whether it has min-width setting?

[jarry]

Please look at this code, it works fine.

Code:

    <div style="width:300px;display:flex;">
        <div style="margin:2px;flex:1;overflow: hidden;border:1px solid red;">
          <input class="easyui-datebox" data-options="" style="width:100%;">
        </div>
        <div style="margin:2px;flex:1;overflow: hidden;border:1px solid blue;">
            <input class="easyui-datebox" data-options="" style="width:100%;">
        </div>
    </div>

[aljcn]

thanks jarry... best wishes

more more money~~~~