css左右布局 右侧的父级是flex:1 子集的文本设置width: 100% 超出用... 会撑爆父

于 2024-01-16 14:59:42 发布
阅读量486 收藏 7
点赞数 8
分类专栏： css 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27806371/article/details/135625215
版权
文章讨论了在使用CSSFlexbox布局时，如何通过将`v1`元素的`width`设置为0来避免`head-rig`元素因`flex:1`导致的宽度溢出问题。
摘要由CSDN通过智能技术生成

v1的width设置100% 把 head-rig 的flex: 1 撑爆了

加上width: 0 即可

木毅01
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决uni-app中flex布局子元素宽度溢出
weixin_43655896的博客
02-16 4459
在如下页面中，每一行使用flex布局，每行的头像宽度指定，右侧容器使用flex:1自适应，当name过长时，右侧容器宽度溢出。 页面布局如下 <view class="friend-list"> <view class="avatar"></view> <view class="wrapper-right"> <view class="wrapper-right-inner"> <view class="text"&.
父元素flex:1子元素height:100%失效的解决办法
CherryCola_zjl的博客
04-21 1万+
子元素设置height:100%，会发现高度并没有变化。网上搜了半天也没解决办法，就写一下 通过设置父元素height:0; 同理 width 。这个方法还能解决 flex:1 超出省略号css失效。 这个方法safari浏览器目前还不兼容，但是chrome有效 /* 父元素 */ .parent{height:0;} 父元素 与 子元素 通过定位解决。 /* 父元素 */ .paren...
flex1时内容溢出
JudyC的博客
11-10 2153
flex: 1 时内容溢出
flex:1盒子的内部盒子高度不可设置为100%
weixin_48975022的博客
08-07 1041
如图，设置一个盒子的宽高为200px，第三个盒子设置为flex：1，效果如下可以看到第三个盒子会自动占据所有的空间，如果内容过多，则高度会更大，但是超出部分会隐藏，此时我们可以设置overflow：auto使其出现滚动条那么问题来了，我们把代码更改如下：如果此时我在第三个盒子里又放一个子盒子，然后设置子盒子的高度是100%，并且设置overflow：auto，那么子盒子的高度和父盒子是完全一样的，如果当内容超多，不也是会出现滚动条吗，但是事实却不是这样，而是直接显示出来了。
flex布局 百分比内容撑大盒子问题
weixin_53763249的博客
07-10 731
上面的二种方法都可以达到我们需要的效果，即给 content 设置了 flex 为 1 的时候，它会动态的获得父容器的剩余宽度，且不会被自己的子元素把内容撑开。在移动端，flex 布局很好用，它能够根据设备宽度来自动调整容器的宽度，用起来很方便，已经越来越离不开它，但是最近在做项目的时候发现一个问题。就是在一个设置了 flex:1 的容器中，如果文字很长，这时候文字就会超出容器，而不是呆在设置好的动态剩余的空间中。.notice可能会非常长，一些设备下需要隐藏显示，即不换行，并留下省略符…
解决flex布局内容超出盒子宽度问题
小漠007的专栏
12-08 7418
方案1： 子项目设置flex:1;overflow:hidden; 子项目内容 设置超出省略号，可以完整显示三个省略号 子项目内容宽度等于子项目 在线预览 #main { width: 350px; height: 100px; border: 1px solid #c3c3c3; display: flex; } #main div:nth-of-type(1) {flex:1;overflow:hidden;} #main div:nth-of-type(2) {flex-g
max_sigma.rar_site:www.pudn.com_最大类间方差_类间方差
09-20
根据提供的描述，“最大类间方差_类间方差”是这个程序的核心概念，而“1234556”可能是作者为了某种目的（如测试、版本号或者随机输入）设置的一串数字。 在机器学习和数据处理领域，类间方差（Inter-Class ...
DL∕T 890.453-2018 能量管理系统应用程序接口（EMS-API）第453部分：图形布局子集
11-10
DL∕T 890.453-2018 能量管理系统应用程序接口（EMS-API）第453部分：图形布局子集
编译原理课程设计：PASCAL子集语言编译器.zip
最新发布
01-06
在编译原理课程设计中，构建PASCAL子集语言的编译器是一项常见的实践任务。这涉及到对编程语言的理解，编译器设计的基本概念，以及如何将源代码转换为可执行程序。以下是对这个主题的详细阐述： 一、编译原理 编译...
使用 Opentype.js 生成字体子集的实例代码详解
10-15
本文将深入探讨如何使用 Opentype.js 库来生成字体子集，这对于优化 Web 端的字体加载速度和减少文件大小至关重要。Opentype.js 是一个强大的 JavaScript 库，它允许在浏览器和 Node.js 环境中处理 OpenType 字体...
libcef.dll 用于 64位 Cefsharp 版本号：90.6.7
10-09
在64位Windows系统上，CEF会使用这个库来提供图形渲染服务。 使用`CefSharp`时，开发者可以享受到Chromium的一些核心特性，例如： 1. **HTML5 支持**：包括WebGL、Web Storage、Web Workers、WebSocket等。 2. **...
记录一个flex布局下宽度溢出且不会换行的问题
百岁如流富贵冷灰的博客
09-17 3983
最近在开发当中遇到了一个属于浏览器的bug： 在flex元素下，如果子元素使用display：table并且设置宽度为100%时会出现超出flex元素的情况，并且设置flex-wrap：wrap属性也不会产生换行 <div style="display: flex;"> <div>left</div> <div style="flex: 1;display: table;width: 100%;background: red;">righ
针对flex布局下文字溢出的解决方法
weixin_67321774的博客
09-30 3130
flex布局，文字溢出
CSS3 - 让元素设定的宽度和高度不被内边距撑开（box-sizing属性说明）
qq_23614619的博客
07-04 1万+
http://www.hangge.com/blog/cache/detail_1098.html有时我们会给页面的元素（比如div）设置个固定的高度或宽度。但如果给这个div又设置了内边距或者边框的话，那么这个div就会被撑大。也就是其实际的尺寸变成了：设置的宽高尺寸+内边距+边框。这样就有可能对我们的布局造成影响，如果不想让内边距和边框影响到我们设置的固定尺寸，可以借助 box-sizing ...
flex布局子元素超出父元素
qq_43101834的博客
01-26 7769
遇到的问题： 父元素是body，宽度给100%。子元素想要距离屏幕两侧各10px，但我给子元素也设置了100%且是flex布局，这时宽度超出屏幕，页面开始横向滑动！ 最终想要的效果是不横向滑动页面完整展示。 现在记录一下这个问题，警告自己，当时写的时候脑子估计废掉了。 类似上图中，子元素 ...
flex布局
gaogaogalyt的博客
06-13 402
flex布局（display: flex;）主轴、侧轴对齐方式，伸缩比，圣杯布局
父元素flex:1,子元素宽度100%失效的问题
weixin_47813845的博客
12-02 3670
今天做项目时遇见一个问题，父元素在设置flex:1来固定宽度撑满时，子元素设置width100%无效。经过尝试发现给父元素及设置flex:1的元素加上width:0可解决。即这样写： .parent{ flex:1; width: 0; .children{ width: 100%; overflow-x:scroll ; } } 但同时遇到了另一个问题，我发现这样设置后，即使width超过之后，横向滚动条依然不出现，经过尝试加上一句代码即可： .parent{
css之flex布局
zhoutianxu1997的博客
08-22 123
flex布局问题
Flex导致设置的width:100%不生效问题
热门推荐
Johnny Liao的博客
10-15 2万+
因为设置了display: flex; 导致block布局变成了flex布局， 所以如果想要在已经设置了flex布局的基础上，再进行子元素的宽100%设置的话，可以应用下面的样式：（在该子元素上设置） flex-shrink: 0; width: 100%; 这样就可以生效了。 ...
父级元素设置了display:flex，子集元素设置position:absolute两者冲突吗
06-08
如果父级元素设置了 display:flex，子元素设置了 position:absolute，子元素将会脱离文档流并相对于最近的已定位祖先元素定位。如果父级元素是已定位元素，子元素将相对于父元素定位。如果父级元素没有定位，子元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值