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.

Sign up for GitHub

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

Jump to bottom

flex排版嵌套 横向尺寸计算错误 导致子元素缩小 #689

Closed
pba-cra opened this issue Sep 16, 2021 · 2 comments · Fixed by #702
Closed

flex排版嵌套 横向尺寸计算错误 导致子元素缩小 #689

pba-cra opened this issue Sep 16, 2021 · 2 comments · Fixed by #702
Assignees
@temper357
Labels
bug Something isn't working

Comments

@pba-cra
Copy link

pba-cra commented Sep 16, 2021

使用的 Kraken 版本 ｜ What version of kraken are you using

v0.8

重现步骤 ｜ Steps To Reproduce

--

重现代码 | Code example: 

<style> 
.container{
  width:100px;
  border:2px gray solid;
  height: 100px;
  margin: 20px;
  box-sizing: border-box;
}
.rowC{
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  overflow: visible;
}
body {
  width: 100vw;
  height: 100vh;
}
</style>

<body>
  <div id="out" style="display: flex;overflow: visible;width: 100vw;height: 130px;">
    <div id="main" class="rowC">
      <div id="2" class="container">
      </div>
      <div id="3" class="container">
    
      </div>
      <div id="4" class="container">
    
      </div>
      <div id="5" class="container">
    
      </div>
      <div id="6" class="container">
    
      </div>
    </div>
  </div>

预期结果 ｜ Expected results:
id为：2，3，4，5，6的元素尺寸不被压缩
id为main的元素clientWidth为700px
id为out的元素的scrollWidth为700px
实际结果 ｜ Actual results:
id为main的元素clientWidth为500px
id为out的元素的scrollWidth为700px
id为：2，3，4，5，6的元素尺寸被压缩，且总和加起来为500px.
@pba-cra pba-cra added the bug Something isn't working label Sep 16, 2021
@pba-cra
Copy link
Author

pba-cra commented Sep 16, 2021

如果 id 为out 和id 为main 是 flex-direction: column 的话是 正常的

@temper357 temper357 mentioned this issue Sep 23, 2021
Merged
@temper357
Copy link
Contributor

temper357 commented Sep 23, 2021 •
edited

如果 id 为out 和id 为main 是 flex-direction: column 的话是 正常的

设置 flex-direction 为 column 同时给 id: out 的容器设置小于 children 高度的 height 如 300px，也能重现与 flex-direction row 一样的问题。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@temper357 temper357

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: main axis auto size not including margin openkraken/kraken
2 participants
@temper357 @pba-cra