coverPiccoverPic

overflow 可以解决 flex 宽度溢出?

问题

在写一个超出宽度省略的小功能时遇到一个奇怪的问题,flex子元素会突破包裹元素的宽度:

代码大概长这个样子:

ts
  1. <template>
  2. <div class="wrapper">
  3. <span class="title">标题:</span>
  4. <div class="content-wrapper">
  5. <div class="content">exampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexample</div>
  6. </div>
  7. </div>
  8. </template>
  9. <style scoped>
  10. .wrapper {
  11. display: flex;
  12. background-color: pink;
  13. width: 500px;
  14. }
  15. .title {
  16. flex-shrink: 0;
  17. }
  18. .content {
  19. overflow: hidden;
  20. text-overflow: ellipsis;
  21. white-space: nowrap;
  22. width: 100%;
  23. }
  24. .content-wrapper {
  25. flex-shrink: 1;
  26. flex-basis: 0;
  27. }
  28. </style>

可见,最外层元素设置了width: 500px,flex 子元素在超出范围后并没有收缩,即使设置了flex-shrink: 1flex-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: automin-height: auto。而滚动容器则是min-width: 0min-height: 0

那什么是滚动容器,具体可以继续看文档。简单来说,overflowautohiddenscroll的是滚动容器,而noneclip则不是。

那么,解决这个问题可以把overflow设置为autohiddenscroll这三个值之一。另外,我们可以注意到,问题出现的关键在于 flex 子元素最小宽高的默认值,这样子,我们也可以直接设置最小宽度为 0 解决这个问题。

css
  1. .content-wrapper {
  2. overflow: auto;
  3. }

或者

css
  1. .content-wrapper {
  2. min-width: 0;
  3. }

最终效果:

结语

当 flex 子元素是非滚动容器时,它默认的最小宽高是内容宽高,而是非滚动容器则为 0。flex 子元素是非滚动容器是引起 flex 子元素溢出问题的原因,可以通过将overflow设置为autohiddenscroll或者把min-width设置为 0 解决这个问题。

感觉 CSS 规则好复杂鸭,这种问题也只有踩到坑才会发现。

0 条评论未登录用户
Ctrl or + Enter 评论
🌸 Run