My objective is to achieve automatic resizing of an HTML element.
This is the script I am using:
<html>
<head>
<style>
.main{
background-color: blue;
width: 500px;
position: fixed;
}
.inner{
background-color: brown;
}
#tag{
display: inline;
background-color: aqua;
}
input{
float: right;
width: auto;
height: 100%;
}
button{
margin-top: 30px;
}
</style>
</head>
<div class="main">
<div class = "inner">
<div id="tag">
</div>
<input type='text'>
</div>
</div>
<button onclick="add()">Add</button>
<script>
function add(){
let text = document.getElementById("tag").innerHTML;
document.getElementById("tag").innerHTML = text+"<span>hi</span>";
}
</script>
</html>
Jsfiddle link: https://jsfiddle.net/j0xmkgd8/
The issue I am facing is the inability to achieve auto-resizing of width.
Expected Outputs
Initially, the input element should have a full width of 500px.
Upon clicking the Add button, the input element's width should resize based on the parent width of 500px with no overflow of elements.
For example, if the Add button is clicked once, the 'Hi' text should appear within the 'inner' class element and the input element's width should shrink in accordance with the inner class width (i.e. 50px for inner class element + 450px for input element = 500px for main class element).
- As the inner class width increases, the input element's width should decrease accordingly.