flex布局子元素宽度超出父元素问题及解决方案
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">1. 第一次遇到这个问题的场景</a></li><li><a href="#_label1">2. 第二种情况</a></li><li><a href="#_label2">3. 问题原因</a></li><li><a href="#_label3">4. 解决方案</a></li><ul class="second_class_ul"><li><a href="#_lab2_3_0">4.1 方案一</a></li><li><a href="#_lab2_3_1">4.2 方案二</a></li></ul></ul></div><p class="maodian"><a name="_label0"></a></p><h2>1. 第一次遇到这个问题的场景</h2><p>先看效果图，大家可以看一下下面的样式，很明显左边和右边的盒子我是给的定宽，但是被挤压了<br />这个是我在项目中遇到的一个bug，使用的 flex 布局，由于我动态的修改绿色盒子的显示与隐藏，导致两边盒子的挤压</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202402/2024022015560220.png" /></p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202402/2024022015560221.png" /></p>
<div class="jb51code"><pre class="brush:css;"><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></pre></div>
<p class="maodian"><a name="_label1"></a></p><h2>2. 第二种情况</h2>
<blockquote><p>很明显，红色的盒子没有300px</p></blockquote>
<p style="text-align:center"><img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202402/2024022015560222.png" /></p>
<div class="jb51code"><pre class="brush:css;"><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></pre></div>
<p class="maodian"><a name="_label2"></a></p><h2>3. 问题原因</h2>
<ul><li>首先了解一下 <code>flex: n;</code> 的定义，当使用单值语法的时候，可以理解为就是设置了 <code>flex: n 1 0;</code> 对应的 <code>flex-grow: n; flex-shrink: 1; flex-basis: 0;</code>，这里我们只探究 <code>flex-grow: n;</code></li><li>flex-grow：规定了项在 flex 容器中分配剩余空间的相对比例，这里的剩余空间指的是除内容之外的空间</li><li>而上面两种情况：<ul><li>情况一：由于 <code>flex-grow</code> 只能使当前元素生效，而子元素的宽度也就是当前元素的内容，在 el-table 中第一次读取宽度后，会给子元素设置固定宽度，进而导致没有剩余空间，也就是当内容空间大于剩余空间时 <code>flex-grow: n;</code> 就已经失效了</li><li>情况二：内容的长单词没有空格，可能在解析的时候当做一个字符，所以内容的长度就是整个字符的实际长度，同样也导致了 <code>flex-grow: n;</code> 的失效</li></ul></li></ul>
<p class="maodian"><a name="_label3"></a></p><h2>4. 解决方案</h2>
<p class="maodian"><a name="_lab2_3_0"></a></p><h3>4.1 方案一</h3>
<ul><li>内容盒设置 <code>width: 0;</code>，侧边栏正常，但是内容盒的内容会溢出，这种情况看怎么处理内容部分</li><li>因为侧边栏的宽度一般都是固定的，这种处理方案虽然会有一定的取舍，但是会比原先好一些</li></ul>
<p class="maodian"><a name="_lab2_3_1"></a></p><h3>4.2 方案二</h3>
<ul><li>给内容盒设置 <code>overflow-y: auto;</code> ，这样侧边栏正常，内容盒会出现横向滚动条</li></ul>
頁:
[1]