input 设置flex:1 失效

最新推荐文章于 2024-07-16 16:30:54 发布
最新推荐文章于 2024-07-16 16:30:54 发布
阅读量4.3k 收藏 1
点赞数 3
文章标签： input flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mrswater/article/details/90292097
版权

问题场景：

最外层的盒子设置为弹性盒子，左边和右边的写成固定宽度，中间的input输入框设置为flex:1，希望input的宽度是所剩下的长度，结果是它比所剩下的长度要大，验证码这三个字就显示成两行了

原因：input兼容弹性盒子有问题，它会有一个自己默认的最小长度，所以会导致验证码显示成两行

解决办法：我们可以给input输入框加一个div父元素，然后这个div设置flex:1,input设置width:100%；即可解决问题

 

前端wa
关注
开发随笔:flex:1被内部元素撑开问题解决办法
qq_24724109的博客
12-27 1万+
flex:1由于内部元素被撑开的问题 问题描述 当flex:1的元素当其子元素过长(文本过长)时，会直接撑开父元素 <!---html---> <div class="wrapper"> <div class="left">1</div> <div class="middle"> ...
解决OPPO手机安卓5.1版本flex布局横向滚动条失效
qq_37473645的博客
11-13 918
解决OPPO手机安卓5.1版本flex布局横向滚动条失效 解决OPPO手机安卓5.1版本flex布局横向滚动条失效，首先尝试flex新旧兼容写法无果后。观察到项目中宽度全部失效，累计宽度最大为容器的宽度，考虑是否是由于容器空间不足，所有项目被迫缩小。将容器中所有项目的flex-shrink属性设置为0后，问题解决。 正常效果 bug效果 有关flex-shrink属性的基本用法 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 计算方法： 当..
在flex布局下input设置flex:1失效的原因
weixin_43130844的博客
08-28 4460
由于input默认存在最小宽度，所以在父元素宽度太小的情况下input设置了flex:1会失效 <div style="width: 100px;display: felx;"> <input style="flex: 1;"><!-- 此时flex: 1就会失效 --> <button style="flex: 0 0 25px"></but...
flex:1失效问题
qq_35559000的博客
11-17 4253
解决flex布局内容超出盒子宽度问题
父元素flex:1，子元素height:100%无效解决方案
最新发布
weixin_46447553的博客
07-16 821
父元素flex:1，子元素height:100%无效解决方案及代码示例
【IE11】弹性布局flex:1失效
weifenhong的博客
07-14 3016
1. 方法一 flex-grow:1; 1. 方法二 flex:1 1 auto;
解决flex:1失效的问题
jie_rookie的博客
12-01 3870
原因：文字过长，文字就会超出容器。
[css] flex:1失效问题
qq_14993591的博客
03-13 758
【代码】[css] flex:1失效问题。
解决：flex: 1； 失效
Miss_Y0的博客
04-24 265
【代码】解决：flex: 1；失效。
IOS开发遇到的小小坑-input无法输入值的问题
qq_43625014的博客
09-10 273
看了一些伙伴的经验，在input的父类加上css样式： -webkit-user-select:text !important; 但是对于我没有用，输入了1个字符就无法继续输入 为此，解决方案： 修改一处，就可以解决无法在input框里输入值的问题， 在css里面，会有一段这样的代码： *{ -webkit-tap-highlight-color: rgba(0,0,0,0); ...
ios部分机型出现select、input等控件点击后失效不可再次点击dug
qq_40665861的博客
11-12 999
问题描述 在昨天晚上的时候测试突然告诉我一个问题，在iphone 6s中select选择器在第一次点击后，其他的选择无法点击。整个手机都属于暂时性死机状态。 问题分析 当时首先对代码进行了排查，排除是逻辑方面的问题。经过多方面验证发现只有6s会出现，这是对兼容性进行了进一步的考虑。 多方面兼容后，发现也不是兼容的问题。在一步步的实验中发现当点击后，需要滑动一次才可以继续点击，这个时候发现有可能是弹...
解决用JavaScript隐藏再显示Flex后不能正常使用问题
firstboy0513的专栏
09-09 3438
其实在试验中，发现IE浏览器是没有问题的，倒是Firefox和Chrome等不可以，发现隐藏swf对象后，再显示时，IE上不会出现重载swf的情况，但是Firefox和Chrome都有重载swf文件的情况，于是想办法让后者浏览器不要重载，于是找到把flex这个object的sty
div中子元素input设置flex无效
隔壁小王的博客
05-27 804
在flex布局下input设置flex:1失效的原因 由于input默认存在最小宽度，所以在父元素宽度太小的情况下input设置了flex:1会失效 解决办法 1:给input在嵌套一层div，设置flex 2:在给input设置width：100%
【踩坑】input的默认宽度，导致flex:1失效
hamal_ye的博客
01-07 3130
先说说这个坑的来源 需求：input输入框跟一个点击按钮并排，点击按钮的宽度固定了，input的宽度就占满剩下的位置 一想到占满剩下的位置，就习惯性地想到了flex:1，然后就写了如下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me...
flex布局父元素不换行子元素设置宽高不生效问题
团酱
03-29 974
flex布局，flex-shrink属性
利用flex解决input定位的问题
qq_34393429的博客
03-12 1634
用简单的布局搞定input框使用fixed下输入的问题 最近在做移动端H5聊天应用发现，当input框在最底部并且使用 position:fixed属性的时候在苹果手机中会出现不兼容的情况 大概布局就是上面是列表底部是input并基于浏览器定位放置于最底部 当点击输入框的时候会出现input位置错乱的情况 这里出现了上移的情况 这里出现了消失的情况，得滑动到最底下才会出现 在经过一系列的面向百度编程后，各种监听input是否聚焦...
flex自适应布局不生效
热门推荐
qq_45327886的博客
11-30 1万+
flex自适应布局不生效
uniapp 小程序 嵌套组件 flex 失效的问题
qq_42339350的博客
05-11 4013
简单代码示例 list是父，item是子 item <template> <view class="test"> <text>111</text> </view> </template> <script> </script> <style lang="scss" scoped> .test { flex:1;//子组件flex：1 border: 3px solid blue; }
uni-app 开发问题记录（一）
sandhy的博客
04-08 745
一.支付宝小程序 自定义组件 ref 返回undefined 配置文件manifest.json 中 支付宝小程序节点增加"component2" : true "mp-alipay" : { "usingComponents" : true, "appid" : "2021002131661052", "component2" : true }, 二.支付宝小程序 直接在自定义组件上设置样式无效 外面包一层view 设置clas...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值