CSS 问题，不用 display:flex 是否能实现这个功能？

[nikoo]

一个不定长的 div，里面包含一个 input 与一个提交按钮，要求 input 可以自适应宽度
有可能不用 flex 实现这个功能吗？

例子： https://jsfiddle.net/ko08g7za/
（左右拖动改变窗口宽度可以看到 input+button 始终能占满 div ）

[GDC]

可以，方法有很多，比如 input 的宽度用 calc() 计算，就看你不用 flex 的原因是啥了

[fanxingyu9555666]

Calc 计算宽度

[nikoo]

@GDC 是考虑浏览器兼容性（是否想多了？）

[nikoo]

@fanxingyu9555666 如果是考虑浏览器兼容性那似乎还不如 flex ？

[Steps]

当然可以。。。
<div style="display: flex;">
<div style="flex: 1;width: 100%;"><input style="width: 100%;"></div>
<div style="width: 80px;"><button type="button" style="width: 100%">按钮</button></div>
</div>

[nikoo]

@Steps 这不还是用 display:flex ？

[GDC]

@nikoo 考虑浏览器兼容性，要看你的用户群体是什么，准备兼容到 IE 几，你去看看 Bootstrap 4 用了多少 flex，关键还是看网站的用户群体

[shakaraka]

你这个例子就是 ok 的啊，什么年代了还有不支持 flex 的么，ie 不是浏览器

[loading]

既然没说不能加 js，那不就几行么。

[whypool]

都什么年代了还不能用 flex ？
ie 不是浏览器

[RtIHZ]

https://caniuse.com/#search=Flexible%20Box

[cmdOptionKana]

@nikoo 这也算一种过早优化了，先上线，后台统计访问你们页面的都有哪些浏览器，然后再决定需要适配到什么程度。

[liyang5945]

最简单的，父 div 设置一个右 padding,宽度比按钮稍宽一些，设置相对定位，里面的 input 设置宽度 100%，提交按钮设置绝对定位

[nikoo]

@liyang5945 好办法！谢谢！

[darmau]

现在真的很难找到不支持 flexbox 的浏览器了

[geelaw]

用 display: table 也可以

[learnshare]

flex 出现之前有很多方法，flex 出现之后就只推荐 flex 了

[netnr]

https://jsfiddle.net/1x2ve0nh/

table 布局

[lneoi]

外层用 div 包裹 input 和 button，button 用 position:absolute 右侧，这样可以写死大小。左侧 input 设置 100%，然后 div 给一个 padding-right 大小稍大于 button 的大小
两个都是动态大小会更方便点

[yimity]

如果你 button 可以固定宽度的话，可以尝试定位的方式。当然了 100% 布局也是可以的。
https://jsfiddle.net/f0dLxcpb/

[lemon6]

calc(100% - xxxpx)

[Steps]

@nikoo #6 抱歉，我没看清楚要求，我以为要用 flex

[Steps]

@lneoi #19 正解！

[otakustay]

容器 div 占满宽度，padding 留出按钮的位置
input 放在 div 里面占满 div 的宽度
button 用绝对定位放边上
https://codepen.io/otakustay/pen/oNXBmmQ
这种效果？

[dimlau]

grid 也是一样。