<form action="" class="formm">
<div class="wrapper">
<input type="text" id="text">
<input type="submit" id="submit" value="Send">
</div>
</form>
<style>
.wrapper{
display: flex;
}
#text{
flex: 1 1 auto;
}
</style>
<nav>
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3 is longer</li>
<li class="push-right">Page 4</li>
</ul>
</nav>
<style>
ul {
display: flex;
justify-content: space-around;
gap: 20px;
}
.push-right {
margin-left: auto;
}
</style>
<style>
.flex_container {
display: inline-flex;
max-width: 100%;
}
.text {
/*flex: 0 1 auto*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
Using Flexbox and text ellipsis together