flex布局，子元素撑开父元素

flex布局宽度高度被内容撑开的问题

或者一些 UI 框架（如 Element UI、Bootstrap 等）里默认给元素加了。，也可能导致子元素不出现滚动，反而把父元素高度继续向下撑开。在 Flex 布局里，默认情况下，子元素的。如果某些子元素没有重置。给相关父容器或者子容器设置。

这样，子元素将会垂直排列在一列内，并自动撑开父元素的宽度。同样地，如果子元素的高度总和超过了父元素的高度，则子元素会被压缩，以适应父元素的高度。这样，子元素将会水平排列在一行内，并自动撑开父元素的宽度。如果子元素的宽度总和超过了父元素的宽度，则子元素会被压缩，以适应父元素的宽度。对于水平排列的情况，我们可以设置父元素的。对于垂直排列的情况，我们可以设置父元素的。

实现父div宽高由内部元素撑开: 父div添加属性:overflow:hidden; 子元素定位时，无法撑开父元素，因为此时子元素已脱离文本流 实现任意元素垂直水平居中方法(单个居中同理): position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); 移动元素自身高宽的一半，因为定位时元素有自身高宽 垂直居中......

3.无论多少层子元素，只要不想给限制的宽高，想让元素flex：1；自适应宽高，都一层层给flex为1时的元素 宽或高 为0限制下去。可以用于解决子元素溢出，撑大父元素，父元素不出现滚动条等问题。自适应填满时，子元素内容溢出，父元素内容撑大，导致页面显示问题，或设置了overflow 为scroll 的元素没出现滚动条等问题。2.同上，如果是纵向排列，flex: 1;的元素是高度铺满的，那就加上height: 0;则元素高度自适应的同事，高度不会被撑大。1.如果是横向排列，flex: 1;

flex 布局子内容被撑开 遇到的问题： 需要显示的文本是通过富文本编辑器提交是文本（包含了p标签），展示时通过flex布局实现。如下图： 但是通过flex布局实现后发现文本内容过长时将后半部分整体撑开了，导致整个卡片内容被撑开了 解决： 通过给富文本编辑器生成的p标签设置flex:1;width:0px;的方式使整个p标签的宽度由flex属性去决定 （也就是有p标签的父元素宽度所决定），再通过设置溢出隐藏的css属性实现溢出隐藏。 overflow: hidden; white-space: nowra

宽度 width !注意: 如果一个元素不添加width 属性，默认属性值为auto，不同的元素浏览器会根据其特点自动计算出实际宽度. 块级元素，其 width 属性的值会自动撑满父元素的 width 区域 注意：width用百分比比的是父元素的width，就是说若取100%，父元素无影响，尽量用px。 块级元素会独占一行，其宽度自动填满其父元素剩余宽度 行内元素，其 width属性的值是内部元素内容自动撑开的宽度。 < body >元素比较特殊，不需要设置 width 属性，宽度会自动适应浏

flex布局中，flex: 1; overflow: auto;的子元素没有如期展示滚动条，而是被内容撑开高度；

align-items: stretch 子元素不设置宽高，其高度与父元素高度相同

今天遇到一个问题，就是flex布局，左边宽度不定，右边填满剩余空间时，右边元素子元素内容会撑出父布局，遂记录之。 html: <div class="container"> <div class="left"> 宽度自适应 </div> <div class="right"> <div class="content"> 子元素 </div> </div> </div

<div class="box"> <div class="a"></div> <div class="b"></div> </div> .box { display: flex;} .b { flex: 1; } ...

语法： writing-mode: horizontal-tb 或者 vertical-rl 或者 vertical-lr 或者 sideways-rl 或者 sideways-lr; 解释： horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-...

把需要自适应的那层父盒子设置为行内块元素

当子级元素宽度不固定时 设置父级元素的 display: inline-block; 即可撑开父级元素。