Flex 布局里 input 宽度最小 150px 的问题, 浏览器 BUG?
今天在使用 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?的更多相关文章
- flex 布局 input 宽度不自适应
flex 布局 input 宽度不自适应 解决方法: 给 input 加上min-height 解决!
- Bootstrap栅栏布局里col-xs-*、col-sm-*、col-md-*、col-lg-*之间的区别及使用方法
原文:Bootstrap栅栏布局里col-xs-*.col-sm-*.col-md-*.col-lg-*之间的区别及使用方法 版权声明:本文为博主原创文章,未经博主允许不得转载. https://bl ...
- android 开发 实现一个app的引导页面,使用ViewPager组件(此引导的最后一页的Button会直接写在最后一页布局里,跟随布局滑进滑出)
基本ViewPager组件使用方式与我之前写的https://blog.csdn.net/qq_37217804/article/details/80332634 这篇博客一致. 下面我们将重点详细解 ...
- 小实例---关于input宽度自适应以及多个input框合并拆分
前两个月,公司内部需要开发关于大数据方面的辅助工具语料分词系统,在这个项目中遇到以下几个主要问题,在此分享~ 一.input宽度根据内定文本宽度自适应 背景:项目需求中,前台展示,需要从后台获取的.t ...
- 小程序 input 组件内容显示不全(显示的长度不满 input 宽度)问题
问题:小程序的input组件经常用到,但在使用input组件的时候会出现一种现象:明明设置了input的宽度,但是输入的内容显示的长度范围却怎么都不到一整个input组件的宽度,而且后面没显示的地方无 ...
- flex布局,input点击软键盘激活,底部按钮上移
安卓手机的问题,原本表单没有超出一屏的时候,上移的现象也是存才的,只是需要滑动body才能看得到,现在,超出一屏了,现象就很明显了 body明显上移: 点击input修改价格: 软键盘出现: 先尝试了 ...
- [Flex] 动态获取组件宽度和高度
flex中我们有时并不想一开始就设置某个组件的宽度和高度,而想动态获取某个组件经填充后的width和height,但是会发现width和height均为0,这时我们可以注册一下两个事件之一来解决. i ...
- 关于小程序 input 组件内容显示不全(显示的长度不满 input 宽度)问题
问题:小程序的input组件经常用到,但在使用input组件的时候会出现一种现象:明明设置了input的宽度,但是输入的内容显示的长度范围却怎么都不到一整个input组件的宽度,而且后面没显示的地方无 ...
- flex 布局,flex-grow 宽度未等比放大问题解决办法
本文转载自:https://blog.csdn.net/sinat_41695090/article/details/79215893 先粘贴上一段代码,flex总体布局 <body> & ...
随机推荐
- 转载spring restemplate
什么是RestTemplate? RestTemplate是Spring提供的用于访问Rest服务的客户端,RestTemplate提供了多种便捷访问远程Http服务的方法,能够大大提高客户端的编写效 ...
- Spring batch学习 (1)
Spring Batch 批处理框架 埃森哲和Spring Source研发 主要解决批处理数据的问题,包含并行处理,事务处理机制等.具有健壮性 可扩展,和自带的监控功能,并且支持断点和重发.让程序员 ...
- 深入浅出 Java Concurrency (6): 锁机制 part 1 Lock与ReentrantLock
前面的章节主要谈谈原子操作,至于与原子操作一些相关的问题或者说陷阱就放到最后的总结篇来整体说明.从这一章开始花少量的篇幅谈谈锁机制. 上一个章节中谈到了锁机制,并且针对于原子操作谈了一些相关的概念 ...
- Django中的Model、Form和ModelForm
一 Model(数据库操作) 1 数据表操作 两种类型: Code First:创建类→自动生成表 DB First:创建表→自动生成类 (很少用) 单表操作: 一对多:(Forienkey) 多对 ...
- OpenCL 矢量存取
▶ 函数 vloadn 和 vstoren 来实现全局存储器和局部存储器之间的向量拷贝 ● 代码 #include <stdio.h> #include <stdlib.h> ...
- windows 下 YII2 配置 memcache
环境: 操作系统 :Windows 7; php: 5.6.8 apche:2.4.12 1.首先安装PHP memcache 拓展,安装方法如下: 1.1下载 memcache 拓展DLL: ht ...
- 建设银行网上银行MD5withRSA php版
1. 首先通过java程序将建设银行的公钥串转成pem格式并写入文件 SignTest.java是运行程序, RSASig.java是建设银行签名算法类, bcprov-jdk15-145.jar是P ...
- tensorflow 卷积神经网络基本参数()
目录: 1. tf.placeholder_with_default(tf.constant(1.0),shape=[],name='use_dropout') # 设置一个占位符 2. tf.c ...
- django多对多数据库建立 以及数据的传输 并进行增加 删除 修改
多对多数据库的建立 class Host(models.Model): nid = models.AutoField(primary_key=True) #自增id hostname = models ...
- UNITY 打APK是如何确定哪些资源有用哪些无用的
一切从build settings开始,它即是 构建列表,构建运行包当然从它开始. 1,只有在构建列表中的场景和场景引用资源才会被打进包里,其它资源除了2,3位置都不会被打包 2,streamming ...