Is it possible to make the last flex item fill up the remaining space only when it's wrapped to a new row in a flex container with flex-wrap:wrap set? The aim is for the last item, like the "Unknown" button in the example, to expand only when it moves to the next line, without growing when it's on the same line.
Currently, I'm using flex: 1000 1 0 for the previous item and flex: 1 for the last item. However, I'm seeking a solution that avoids such large differences in flex grow values, especially since I may need to adjust the behavior based on media queries, potentially removing flex grow for other items.
.ut_text {
min-width: 150px!important;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e0ededf6f1f6f0e3f2c2b6acb4acb0">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="m-2 border border-primary" style="width:300px; resize:horizontal; overflow:hidden;">
<div class="input-group">
<div class="input-group flex-nowrap" style="flex: 1000 1 0;">
<input type="text" placeholder="I am placeholder" class="form-control ut_text"/>
<div class="input-group-append">
<a class="form-control btn btn-dark">
Search
</a>
</div>
</div>
<div class="input-group-append" style="flex: 1;">
<a class="form-control btn btn-outline-danger">Unknown</a>
</div>
</div>
</div>(Please note that any solution should not rely on the properties of the container, as its width/overflow/resize settings are purely for demonstration purposes.)