javascript - 具有固定填充的动态大小的嵌套元素

Question

以下 HTML 为 200 像素宽、30 像素高的可编辑组合框打下了非常干净的基础，该组合框可与 Angular 绑定(bind)或其他一些 JavaScript 数据绑定(bind)一起使用。但是，我希望最外层的 div 为 100% 宽，而 180px 宽的 div 使用填充而不是显式大小。但是，填充似乎总是被忽略。有谁知道这是为什么，以及是否有任何好的解决方法？ (最好是 CSS/HTML)

<style>
    .comboboxOuterDiv {
        padding:0px; 
        margin:0px; 
        border:0px; 
        height:30px; 
        width:200px; 
        position:relative;
    }
    .comboboxSelectDiv {
         height:100%; 
         width:100%; 
         position:absolute; 
         top:0px; 
         left:0px; 
         z-index:0;
    }
    .comboboxSelect {
        height:100%; 
        width:100%; 
        position:absolute; 
        top:0px; 
        left:0px;
    }
    .comboboxTextDiv {
        height:100%; 
        width:180px; 
        position:absolute; 
        top:0px; 
        left:0px; 
        z-index:1;
    }
    .comboboxText {
         height:100%; 
         width:100%; 
         position:absolute; 
         top:0px; 
         left:0px; 
    }
</style>
<div class="comboboxOuterDiv">
    <div class="comboboxSelectDiv">
        <select class="comboboxSelect">
            <option value="a_value">A Value</option>
        </select>
    </div>
    <div class="comboboxTextDiv">
        <input class="comboboxText" type="text"/>
    </div>
</div>

Answer 1

这里是任何感兴趣的人的工作示例:

<style>
    .comboboxOuterDiv {
        padding:0px; 
        margin:0px; 
        border:0px; 
        height:30px; 
        width:100%; 
        position:relative;
        overflow:hidden;
    }
    .comboboxSelectDiv {
         height:100%; 
         width:100%; 
         position:relative; 
         top:0px; 
         left:0px; 
         z-index:0;
    }
    .comboboxSelect {
        height:100%; 
        width:100%; 
        position:absolute; 
        top:0px; 
        left:0px;
    }
    .comboboxTextDiv {
        display:block;
        height:100%; 
        width:auto; 
        position:absolute; 
        top:0px; 
        left:0px; 
        right:20px;
        z-index:1;
    }
    .comboboxText {
         height:100%; 
         width:100%; 
         position:absolute; 
         top:0px; 
         left:0px; 
    }
</style>
<div class="comboboxOuterDiv">
    <div class="comboboxSelectDiv">
        <select class="comboboxSelect">
            <option value="a_value">A Value</option>
        </select>
    </div>
    <div class="comboboxTextDiv">
        <input class="comboboxText" type="text"/>
    </div>
</div>