首页 前端知识 关于 flex 布局时,子元素宽度超出父元素问题及解决方案(问题)

关于 flex 布局时,子元素宽度超出父元素问题及解决方案(问题)

2024-02-09 20:02:09 前端知识 前端哥 832 468 我要收藏

文章目录

      • 1. 第一次遇到这个问题的场景
      • 2. 第二种情况
      • 3. 问题原因
      • 4. 解决方案
        • 4.1 方案一
        • 4.2 方案二

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 class="container">
  <div class="box1"></div>
  <div class="box2">
    <div>
      ...el-table
    </div>
  </div>
  <div class="box3 none"></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="container">
  <div class="box1"></div>
  <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; ,这样侧边栏正常,内容盒会出现横向滚动条
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1600.html
标签
评论
发布的文章

CSS样式变换效果及动画

2024-02-23 11:02:51

实现 抽屉效果 css3

2024-02-23 11:02:47

jQuery (JavaScript)进阶使用

2024-02-23 11:02:59

CSS样式

2024-02-23 11:02:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!