flex布局子元素宽度超出父元素问题及解决方案_F11

分享到

flex布局子元素宽度超出父元素问题及解决方案

css 来源：互联网作者：佚名发布时间：2024-02-23 22:05:25 人浏览

摘要

1. 第一次遇到这个问题的场景先看效果图，大家可以看一下下面的样式，很明显左边和右边的盒子我是给的定宽，但是被挤压了这个是我在项目中遇到的一个bug，使用的 flex 布局，由于我动态

1. 第一次遇到这个问题的场景

先看效果图，大家可以看一下下面的样式，很明显左边和右边的盒子我是给的定宽，但是被挤压了
这个是我在项目中遇到的一个bug，使用的 flex 布局，由于我动态的修改绿色盒子的显示与隐藏，导致两边盒子的挤压

<style>

.container {

width: 1400px;

display: flex;

height: 100vh;

}

.box1 {

background-color: red;

width: 300px;

}

.box2 {

background-color: yellow;

flex: 1;

}

.box3 {

background-color: green;

width: 400px;

}

</style>

<div>

...el-table

</div>

</div>

2. 第二种情况

很明显，红色的盒子没有300px

在这里插入图片描述

<style>

.container {

display: flex;

width: 600px;

height: 600px;

}

.box1 {

background-color: red;

width: 300px;

}

.box2 {

background-color: yellow;

flex: 1;

}

</style>

<div class="box2">Loremipsumdolorsitametconsecteturadipisicingelit.Quasi,eveniet?</div>

</div>

3. 问题原因

首先了解一下 flex: n; 的定义，当使用单值语法的时候，可以理解为就是设置了 flex: n 1 0; 对应的 flex-grow: n; flex-shrink: 1; flex-basis: 0;，这里我们只探究 flex-grow: n;
flex-grow：规定了项在 flex 容器中分配剩余空间的相对比例，这里的剩余空间指的是除内容之外的空间
而上面两种情况：
- 情况一：由于 flex-grow 只能使当前元素生效，而子元素的宽度也就是当前元素的内容，在 el-table 中第一次读取宽度后，会给子元素设置固定宽度，进而导致没有剩余空间，也就是当内容空间大于剩余空间时 flex-grow: n; 就已经失效了
- 情况二：内容的长单词没有空格，可能在解析的时候当做一个字符，所以内容的长度就是整个字符的实际长度，同样也导致了 flex-grow: n; 的失效

4. 解决方案

4.1 方案一

内容盒设置 width: 0;，侧边栏正常，但是内容盒的内容会溢出，这种情况看怎么处理内容部分
因为侧边栏的宽度一般都是固定的，这种处理方案虽然会有一定的取舍，但是会比原先好一些

4.2 方案二

给内容盒设置 overflow-y: auto; ，这样侧边栏正常，内容盒会出现横向滚动条

您可能感兴趣的文章 :

原文链接 :

Tag : 布局(28)Flex(20)

css溢出隐藏的几种方法实现介绍

当容器中的文本内容超出容器的宽度或高度时，就会出现文本溢出的情况。下面介绍几种CSS实现文本溢出的方法。单行文本溢出省略单行文
flex布局子元素宽度超出父元素问题及解决方案

1. 第一次遇到这个问题的场景先看效果图，大家可以看一下下面的样式，很明显左边和右边的盒子我是给的定宽，但是被挤压了这个是我在
css3实现四周线条环绕流动效果

效果：代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
css实现边框流动的项目介绍

要实现一个边框流动的效果，可以使用CSS动画来实现。在HTML中，我们需要创建一个元素（例如div），并将其设置为具有一定宽度和高度的盒
CSS中设置文字下划线的几种方法介绍

一、CSS种使用 text-decoration 属性来设置文字的装饰效果，包括下划线。常用的取值： none：默认值，不设置任何装饰效果。 underline：设置文
CSS实现文字字体颜色渐变的三种方法介绍

第一种方法 1 2 3 4 5 6 /*实现文字颜色从红到黄的线性渐变效果*/ .gradient-text { background: linear-gradient(to right, #ff0000, #ffff00); /*设置渐变的方向从
CSS实现一个渐变色箭头的代码

产品希望在漏斗图的旁边，每一层漏斗边上加上一个渐变色的箭头，效果如下：实现网上大部分的箭头实现都是利用一个div来实现箭头躯干
CSS3调整背景图片大小的代码介绍

在CSS3中，如果想要调整背景图片的大小可以通过设置background-size属性进行设置。一、background-size 语法格式 1 background-size: length|percentage|co
css3中nth-child()的用法介绍

nth-child（n）是css3中的一种选择器，它的作用是匹配属于其父元素的第n个元素，不论元素的类型。重点是不论元素的类型这句话，好多人容
CSS实现风吹动树叶的动画效果的代码

如题，要实现树叶在风中摇摆的动画，首先准备主体：树叶。这里准备了两张矢量的高清版 SVG 格式的不同种类的树叶。首先我们使用img标