Html 相对于div的动态搜索栏

我很好奇这是怎么做到的，我做了一些类似的东西，例如

<div class="header-con">
   <div class="search-bar-con">
       <input type="text" name="search" class="search-bar"> 
       <input type="submit" name="search-submit" class="search-btn">
   </div>

   <div class="function-con">

     <div class="func-btn">Home</div>
     <div class="funct-btn">About</div>

   </div>
</div>

我的意图是保持函数容器的固定宽度，但搜索容器在页面宽度和函数容器位置方面是动态的。此时，功能容器在空间不足时中断，因为搜索栏的宽度变化不足以留出空间。我一直在使用媒体查询，但并不像上面的gif那样平滑或简单

---

谢谢。

我想如果您将

中的
最小宽度：105px
更改为：
最大宽度：105px
，这就完成了任务
max width
用于在移动设备上或在本例中的浏览器窗口上进行缩放
 对于这些情况，弹性箱是最好的方法。这样，必须填充行剩余空间的div
.function con
就具有属性
flex:1


.header-con{
显示器：flex；
}
.搜索栏{
左：0px；
顶部：-13px；
保证金：0；
填充：0；
调整内容：灵活启动；
左边距：10px；
}
.函数con{
位置：相对位置；
排名前10%；
宽度：自动；
身高：80%；
显示：内联块；
保证金：0；
填充：0；
弹性：1；
显示器：flex；
填充：0 20px；
}

家
关于

  .search-bar-con {
   position: relative;
   left: 0px;
   top: -13px;
   width: 43%;
   height: 80%;
   display: inline-block;
   margin: 0;
   min-width: 105px;
   padding: 0;
   flex: 1 1 auto;
   justify-content: flex-start; 
   margin-left: 10px;
 }

 .function-con {
    position: relative;
    top:10%;
    width: auto;
    height: 80%;
    display: inline-block;
    margin: 0;
    padding: 0;
}