Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: flex stretch height when positioned child exists #1004

Merged
merged 21 commits into from Dec 28, 2021

Conversation

temper357
Copy link
Contributor

@temper357 temper357 commented Dec 22, 2021

Closes #1003

修复当无高度的 flex 布局下有 position absolute 的 image 时高度不应该由 image 撑开。

问题:Flex layout 原来的布局逻辑是先 layout placeholder(当 position absolute 的元素未指定 top/left 需要使用占位的 offset),再 layout 在文档流的 renderBox,但是 placeholder 的 layout 时同样会设置容器 size,当 flex 未设置 height 时这导致容器高度由 image 的高度撑开。

fix: 将 placeholder 的 layout 阶段放在正常文档流 renderBox 的 layout 阶段之后,保证 placeholder layout 时容器 size 已确定能正常定位(之前这里也有 bug),同时 placeholder 的 layout 阶段只做 layout 与 set offset,不需要对容器 set size。

另外,对于 flex 与 flow layout 代码进行了整体的重构,目标是让代码更可读易维护,包含以下一些手段:

  • 对要进行 layout 的节点分类成数组,分成 positioned renderBox, non positioned renderBox, placeholder renderBox 与 sticky renderBox,在分类进行 layout 时将数组传入,避免之前每次 layout 都对所有节点进行遍历的低效操作。
  • 重构一些有副作用的方法,尽量保证数据结构不可变。
  • 统一 flex 与 flow layout 的 layout 阶段与方法名。

@temper357 temper357 changed the title [WIP] fix: flex stretch height when positioned child exists fix: flex stretch height when positioned child exists Dec 24, 2021
@answershuto answershuto merged commit de099ae into main Dec 28, 2021
@answershuto answershuto deleted the fix/flex-stretch-height branch December 28, 2021 12:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Flex 容器下绝对定位图片导致 Flex 容器高度计算异常
3 participants