今天在使用 flex 布局时, 发现当 flex 布局容器比小(小于 150px )时,里面的 input[text] 的宽度会比容器宽:

<style>
#main
{
width:120px;
height:30px;
border:1px solid black;
display:flex;
padding: 5px;
} </style> <div id="main">
<input type="text" style="flex-grow:1;float:left" />
<button>OK</button>
</div>

  

经过测试, 发面 flex 容器下面的 input 最小宽度是 150px, 设置 min-width, display, float 都没有用, 宽度就是有 150px, 如果给 input 设置一个固定宽度, 那又不能自适应容器的大小。

各种测试发现都不行, 最后把 input 的 width 设置为 0, 竟然就可以了, 这到底是哪种意思?

<input type="text" style="width:0;flex-grow:1" />

Flex 布局里 input 宽度最小 150px 的问题, 浏览器 BUG?的更多相关文章

  1. flex 布局 input 宽度不自适应

    flex 布局 input 宽度不自适应 解决方法: 给 input 加上min-height 解决!

  2. Bootstrap栅栏布局里col-xs-*、col-sm-*、col-md-*、col-lg-*之间的区别及使用方法

    原文:Bootstrap栅栏布局里col-xs-*.col-sm-*.col-md-*.col-lg-*之间的区别及使用方法 版权声明:本文为博主原创文章,未经博主允许不得转载. https://bl ...

  3. android 开发 实现一个app的引导页面,使用ViewPager组件(此引导的最后一页的Button会直接写在最后一页布局里,跟随布局滑进滑出)

    基本ViewPager组件使用方式与我之前写的https://blog.csdn.net/qq_37217804/article/details/80332634 这篇博客一致. 下面我们将重点详细解 ...

  4. 小实例---关于input宽度自适应以及多个input框合并拆分

    前两个月,公司内部需要开发关于大数据方面的辅助工具语料分词系统,在这个项目中遇到以下几个主要问题,在此分享~ 一.input宽度根据内定文本宽度自适应 背景:项目需求中,前台展示,需要从后台获取的.t ...

  5. 小程序 input 组件内容显示不全(显示的长度不满 input 宽度)问题

    问题:小程序的input组件经常用到,但在使用input组件的时候会出现一种现象:明明设置了input的宽度,但是输入的内容显示的长度范围却怎么都不到一整个input组件的宽度,而且后面没显示的地方无 ...

  6. flex布局,input点击软键盘激活,底部按钮上移

    安卓手机的问题,原本表单没有超出一屏的时候,上移的现象也是存才的,只是需要滑动body才能看得到,现在,超出一屏了,现象就很明显了 body明显上移: 点击input修改价格: 软键盘出现: 先尝试了 ...

  7. [Flex] 动态获取组件宽度和高度

    flex中我们有时并不想一开始就设置某个组件的宽度和高度,而想动态获取某个组件经填充后的width和height,但是会发现width和height均为0,这时我们可以注册一下两个事件之一来解决. i ...

  8. 关于小程序 input 组件内容显示不全(显示的长度不满 input 宽度)问题

    问题:小程序的input组件经常用到,但在使用input组件的时候会出现一种现象:明明设置了input的宽度,但是输入的内容显示的长度范围却怎么都不到一整个input组件的宽度,而且后面没显示的地方无 ...

  9. flex 布局,flex-grow 宽度未等比放大问题解决办法

    本文转载自:https://blog.csdn.net/sinat_41695090/article/details/79215893 先粘贴上一段代码,flex总体布局 <body> & ...

随机推荐

  1. tomcat下载安装和配置

    Tomcat服务器 1.Web开发中的常见概念 (1)B/S系统和C/S系统 Brower/Server:浏览器 服务器 系统 ----- 网站 Client/Server:客户端 服务器 系统 -- ...

  2. C# 使用printDocument1.Print打印时不显示 正在打印对话框(里面还有一个讨厌的取消按钮)

    C#使用printDocument1.Print打印时不显示正在打印对话框有两种方法 第一种,使用PrintController PrintController printController = n ...

  3. 【331】python 下载文件:wget / urllib

    参考:python下载文件的三种方法(去掉-) 方法一:wget import wget, os # 设置下载路径 os.chdir(r"D:/tmp") url="ht ...

  4. 在MarkDown中插入数学公式对照表(持续更新)

    目录 在MarkDown中可以插入数学公式,但是在博客园和有道云笔记之中的数学公式插入方式略有不同(博客园需要先在后台选项中开启插入数学公式选项): 代码 行内公式 整行公式 博客园 $数学公式$ $ ...

  5. 话说C# 6.0之后

    最想看到的:1. 加入脚本语言支持,可以解释运行,作为程序的二次开发语言(类似于vba,python).2. 可以自定义运算符,为了安全起见,自定义运算符应该特别予以说明(类似于数学表达式,多样式的运 ...

  6. 第七章 二叉搜索树 07B2-1 插入:算法

  7. PLSQL优化基础和性能优化 (学习总结)

    PLSQL优化基础和性能优化 (学习总结) 网上有一篇关于PLSQL优化的文章,不错,个人根据自己的经验再稍加整理和归纳,总结PLSQL优化和性能调优 适合有一定PLSQL基础,需要进一步提高的学友看 ...

  8. PHP与Imagemagick

    Imagemagick:相关站点: ImageMagick中文站:http://www.imagemagick.com.cn/ ImageMagick英文站:http://www.imagemagic ...

  9. ICG游戏:证明,先手不是必胜就是必败。

    简介: ICG游戏:Impartial Combinatorial Games,公平的组合游戏. 以下是定义,来自网络,可能不够严谨: 1.两名选手:2.两名选手轮流行动,每一次行动可以在有限合法操作 ...

  10. Git忽略规则及.gitignore规则不生效的解决办法(转)

    在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改根目录中 .gitignore 文件的方法(如无,则需自己手工建立此文件).这个文件每一行保存了一个匹配的规则例如: # 此为注 ...