How to limit element from expanding past parent div when dynamic elements are added?-CodePudding

Situation: I'm trying to create a dynamic input box where I can add words to a box to have them display individually in bubbles. To build up to that, I'm trying to have a div container ( ) side by side with an input field (), so when a user adds an element it drops it in the div container displaying both side by side. If you're confused on what I'm trying to achieve I posted a jsfiddle for reference.

My Issue: When I add an element to the div container, it expands the size of the container past the maximum size I tried to allocate for it. I set a specific size to the parent div containing everything. I think my issue lies in that, using width=100% for the input box references the parent div which does not change despite adding new elements side by side. How can I make the input text box dynamically resize itself to fill in the left over space and no more?

My goal: Figure out how to make the input box dynamically resize to fit the parent container when sibling elements are added side by side to it.

Any help would be greatly appreciated.

Code Snippet:

$('.emotionsInput').keypress(function (e) {
    var key = e.which;

    if (key == 13)
    {
        var inputWord = $(this).val();
        var currentCell = $(this);
        createTag(currentCell);
    }
})

function createTag(currentCell)
{
    var parentCell = currentCell.parent()

    var inputWord = currentCell.val();

    currentCell.val("");
    var newTagHTML = '<span >'   inputWord   '</span>';
    parentCell.children(".emotionTagsDiv").append(newTagHTML);
}

#testTagBox > span > span {
    border-color:transparent;
    box-shadow:0 0 0 2px #000;
    border-radius: 40px;
    padding:5px;
    background-color: white;
    width: 100%;
    display:flex; /* changed this here, it was inline*/
}

#testTagBox > span {
    padding: 0.67rem 0.5rem;
    width: 100%;
    display:flex; /* changed this here, it was inline-block */ 
}

#testTagBox {
    width: 30rem;
    padding-right:1.8rem;
}

.emotionsDiv {
    display: flex; /* changed this here, it was inline-block */
    width: 100%;
    white-space: nowrap;
}

.emotionTagsDiv {
    flex: 1 1 auto; /* added this here */
    white-space: nowrap;
}

.emotionTag {
    display: inline-block;
    padding-right: 1em;
}

input {
    font-family: Arial;
    display: flex; /* changed this here */
    flex: 20 1 auto; /* added this so that it prioritizes shrinking this element.*/
    width: 100%;
}

input:focus {
    outline: none;
}

<html lang="en">
<body>
    <div id="testTagBox">
        <span>
            <span>
                <div >
                    <div >

                    </div>
                    <input  placeholder="type and press enter here" type="text" value="">
                </div>
            </span>
        </span>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
    <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
    <script src="testapp.js" type="text/javascript" ></script>
</body>
</html>

As you can see, when you add an element the entire container resizes when I'm trying to make the input box be fixed on the right side and reduce size on the left so the container stays the same size and everything fits in.

CodePudding user response：

Width if the input can be adjusted by changing the display property of .emotionTagsDiv to flex

$('.emotionsInput').keypress(function (e) {
    var key = e.which;

    if (key == 13)
    {
        var inputWord = $(this).val();
        var currentCell = $(this);
        createTag(currentCell);
    }
})

function createTag(currentCell)
{
    var parentCell = currentCell.parent()

    var inputWord = currentCell.val();

    currentCell.val("");
    var newTagHTML = '<span >'   inputWord   '</span>';
    parentCell.children(".emotionTagsDiv").append(newTagHTML);
}

#testTagBox > span > span {
    border-color:transparent;
  
 
    padding:5px;
    background-color: white;
    width: 100%;
}

#testTagBox > span {
    padding: 0.67rem 0.5rem;
    width: 100%;
}

#testTagBox {
    max-width: 30rem; 
    padding-right:1.8rem;
}

.emotionsDiv {
    display: flex;
    width: 100%;
      box-shadow:0 0 0 2px #000;
     padding: .5rem;
       border-radius: 40px;
}

.emotionTagsDiv {
    display: inline-block;
    white-space: nowrap;
}

.emotionTag {
    display: inline-block;
    padding-right: 1em;
}

input {
    /* border-style: hidden; */
    font-family: Arial;
    display: inline-block;
    width: 100%;
    min-width: 50px; 
}

input:focus {
    outline: none;
}

<html lang="en">
<body>
    <div id="testTagBox">
        <span>
            <span>
                <div >
                    <div >

                    </div>
                    <input  placeholder="type and press enter here" type="text" value="">
                </div>
            </span>
        </span>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
    <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
    <script src="testapp.js" type="text/javascript" ></script>
</body>
</html>