javascript - 如何使文本框增长到其父div的宽度

Question

<div class="mail-holder">
  <ul class="multi-input">
    <li class="temp-value">
        <input type="text" placeholder="Email" class="mail-input">
    </li>
   </ul>
   <div class="button-holder">
    <button type="button" class="btn btn-success">Share Users</button>
    <button type="button" class="btn-cancel">Cancel</button>
   </div>
</div>

.mail-holder
{
    margin: 0px;
    clear: both;
    position: relative;
}
.temp-value
{
    width: auto;
    min-width: 90px;
    max-width: 100%;
    height: 26px;
    width: auto;
    float: left;
    display: inline-block;
}
.mail-input
{
    outline:none !important;
    border: none;
    text-align: left;
    padding-left: 4px;
    padding-top:2px;
    resize:none;
    background: none;
}
.button-holder
{
    margin-top: 20px;
    clear: both;
}
.button-holder .btn-cancel
{
    color: #7d7d7d;
    margin-left: 20px;
    vertical-align: middle;
    border: none;
    background: none;
}
.multi-input
{
    list-style-type: none;
    color: #83a3b8;
    border: 1px solid #dedede;
    width: 100%;
    max-height: 80px;
    overflow-y:auto;
    margin-bottom: 0px;
    display: inline-block;
    padding: 7px 0px 5px 0px;
}
.temp-li
{
    float: left;
    display: inline-block;
    margin: 0px 0px 3px 3px;
    background-color: #def2ff;
    padding: 0px 3px;
    border-radius: 5px;
    border: 1px solid #bfd7e7;
}

JQUERY

$(".mail-input").keyup(function (e) {
        var value = $(".mail-input").val();

        if (e.keyCode == 13) {

            if (value.length == 0) {
                return false;
            } else {
                $('.multi-input li.temp-value').before('<li class="temp-li">' + value + '<span class="close-btn">x</span></li>');
                $('.mail-input').val('').focus();
            }
        } else if (e.keyCode == 8) {

            if (value.length == 0) {
                $('.multi-input li:last-child').prev().remove();
            } else {
                return false;
            }
        }
    });
$('.btn-cancel').click(function () {
    $('.auto-gen li').remove();
    $('.multi-input li').not('li:last').remove();
    $('.mail-input').val('').focus();
});
$('body').on('click', '.close-btn', function () {
    $(this).parent().remove();
});

我需要将文本框扩展到父 div 宽度的末尾。一旦文本的值溢出父级的宽度。它应该分解到下一行。我所做的一切就像输入标签一样，它有助于存储输入的值并存储在 li 中。提前致谢。

DEMO

Answer 1

这里我给出了文本框全宽的解决方案。我不确定列表的分解情况。

.temp-value
{
width: auto;
min-width: 90px;
max-width: 100%;
height: 26px;
width: 100%;
float: left;
display: inline-block;
}
.mail-input
{
outline:none !important;
border: none;
text-align: left;
padding-left: 4px;
padding-top:2px;
resize:none;
background: none;
width:100%;
box-sizing:border-box;
}

DEMO