如何实现一个搜索框，按钮宽度固定，input的宽度自适应

如何实现一个搜索框，按钮宽度固定，input的宽度自适应

方法 1

利用flex-grow让input填充剩余空间

<div>
    <input>
    <button type="button">搜索</button>
</div>

div{
  display: flex;
}
button{
  width:100px;
}
input{
  flex-grow: 1;
}

方法2

同样使用flex布局，给input设置width:100%；给button设置固定宽度同样可以让Input填充剩余空间，而且不会让button换行

<div>
    <input>
    <button type="button">搜索</button>
</div>

div{
  display: flex;
  border: 1px solid red;
}
button{
  width:100px;
}
input{
  width: 100%;
}

方法3

使用grid布局，让Input列自动撑开，给button列固定宽度

<div>
    <input>
    <button type="button">搜索</button>
</div>

div{
  border: 1px solid red;
  display: grid;
  grid-template-columns: auto 100px;
}