问题
在写一个超出宽度省略的小功能时遇到一个奇怪的问题,flex
子元素会突破包裹元素的宽度:
代码大概长这个样子:
ts- <template>
- <div class="wrapper">
- <span class="title">标题:</span>
- <div class="content-wrapper">
- <div class="content">exampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexample</div>
- </div>
- </div>
- </template>
- <style scoped>
- .wrapper {
- display: flex;
- background-color: pink;
- width: 500px;
- }
- .title {
- flex-shrink: 0;
- }
- .content {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- width: 100%;
- }
- .content-wrapper {
- flex-shrink: 1;
- flex-basis: 0;
- }
- </style>
可见,最外层元素设置了width: 500px
,flex 子元素在超出范围后并没有收缩,即使设置了flex-shrink: 1
和flex-basis: 0
也没有用。就是说,我得要.content-wrapper
这个元素正常的放缩。
解决
这里搜了一下,得到了很多有用的回答:flex布局子元素宽度超出父元素问题、如何解决flex文本溢出问题、Why don’t flex items shrink past content size?。
我们可以看文档,flex 子元素作为滚动容器(scrolling container)的时候,它的默认最小宽高会被设置为 0,是非滚动容器则为内容区域大小。
To provide a more reasonable default minimum size for flex items, the used value of a main axis automatic minimum size on a flex item that is not a scroll container is a content-based minimum size; for scroll containers the automatic minimum size is zero, as usual.
非滚动容器,相当于设置了min-width: auto
和min-height: auto
。而滚动容器则是min-width: 0
和min-height: 0
。
那什么是滚动容器,具体可以继续看文档。简单来说,overflow
是auto
、hidden
、scroll
的是滚动容器,而none
和clip
则不是。
那么,解决这个问题可以把overflow
设置为auto
、hidden
、scroll
这三个值之一。另外,我们可以注意到,问题出现的关键在于 flex 子元素最小宽高的默认值,这样子,我们也可以直接设置最小宽度为 0 解决这个问题。
css- .content-wrapper {
- overflow: auto;
- }
或者
css- .content-wrapper {
- min-width: 0;
- }
最终效果:
结语
当 flex 子元素是非滚动容器时,它默认的最小宽高是内容宽高,而是非滚动容器则为 0。flex 子元素是非滚动容器是引起 flex 子元素溢出问题的原因,可以通过将overflow
设置为auto
、hidden
、scroll
或者把min-width
设置为 0 解决这个问题。
感觉 CSS 规则好复杂鸭,这种问题也只有踩到坑才会发现。