DioxusLabs
Auto-sizing doesn't work if children have only `min_height`.
taffy version
v0.3.18
Platform
Rust OS/X
What you did
In Bevy, I create a container element whose height is 'auto', and whose layout is a flex column. I then give it several children whose height is specified by min_height.
What went wrong
I would expect the container to compute its height so as to fit all the children. Instead, the container height is minimal (only padding), and the children overflow the container.
However, if I change the children to have height instead of min_height, it works correctly.
Alternatively, if I add some text nodes inside the children, it also works correctly.
Additional information
Minimal example using Bevy: sizing_bug.rs.zip
I am unable to reproduce this. The following HTML snippet causes the outer div to have a height of 90px on both web and with Taffy:
<div id="test-root" style="display: flex; flex-direction: column; width: 50px;">
<div style="min-height: 20px;"></div>
<div style="min-height: 30px;"></div>
<div style="min-height: 40px;"></div>
</div>
Well, I can certainly reproduce it. Did you get a chance to try the minimal example I posted?
Well, I can certainly reproduce it. Did you get a chance to try the minimal example I posted?
Oh sorry, I completely missed that you'd posted a code example. I will check it out.
I briefly looking into this, and I was able to reproduce the issue using your provided bevy sample. But I was not able to reproduce the issue when translating it into a Taffy gentest. Will try to investigate this further when I get a chance.
I ran into a similar issue with taffy 0.5.2 on rust(also tried 0.3 which has the same issue) so I am posting on this ticket with my issue.
The dump of the html code where the auto-sizing inner frame has min size set to 50px and outer frame has max size set to 100px both with paddings set to 10px. I'm expecting outer measured 70px high but it is 40px(paddings added up).
<html>
<style>
div {
box-sizing: border-box;
border: 1px solid red;
}
body {
margin: 20px;
}
</style>
<div id="container" style="display: flex; overflow-x: hidden; overflow-y: hidden; position: relative; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 1200px; height: 800px; min-width: 1200px; min-height: 800px; max-width: 1200px; max-height: 800px; margin-top: 0px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; padding-top: 0px; padding-left: 0px; padding-bottom: 0px; padding-right: 0px; align-items: flex-start; align-content: flex-start; justify-content: flex-start; gap: 0px 0px; flex-direction: row; flex-wrap: nowrap; flex-basis: auto; flex-grow: 0; flex-shrink: 0">
<div id="outer" style="display: flex; overflow-x: hidden; overflow-y: hidden; position: absolute; top: 0%; left: 0%; bottom: auto; right: auto; width: auto; height: auto; min-width: auto; min-height: auto; max-width: 100px; max-height: 100px; margin-top: 387px; margin-left: 500px; margin-bottom: 0px; margin-right: 0px; padding-top: 10px; padding-left: 10px; padding-bottom: 10px; padding-right: 10px; align-items: center; align-content: flex-start; justify-content: center; gap: 10px 10px; flex-direction: column; flex-wrap: nowrap; flex-basis: auto; flex-grow: 0; flex-shrink: 0">
<div id="inner" style="display: flex; overflow-x: hidden; overflow-y: hidden; position: relative; top: 0px; left: 0px; bottom: 0px; right: 0px; width: auto; height: auto; min-width: 50px; min-height: 50px; max-width: auto; max-height: auto; margin-top: 0px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; padding-top: 10px; padding-left: 10px; padding-bottom: 10px; padding-right: 10px; align-items: center; align-content: flex-start; justify-content: center; gap: 10px 10px; flex-direction: column; flex-wrap: nowrap; flex-basis: auto; flex-grow: 0; flex-shrink: 0">
</div>
</div>
</div>
</body>
</html>
ended up with the output taffy tree:
TREE
└── FLEX ROW [x: 0 y: 0 width: 1200 height: 800 ] (NodeId(4294967297))
└── FLEX COL [x: 500 y: 387 width: 70 height: 40 ] (NodeId(4294967298))
└── LEAF [x: 10 y: -5 width: 50 height: 50 ] (NodeId(4294967299))
Node #root 0:
Layout { order: 0, location: Point { x: 0.0, y: 0.0 }, size: Size { width: 1200.0, height: 800.0 }, scrollbar_size: Size { width: 0.0, height: 0.0 }, border: Rect { left: 0.0, right: 0.0, top: 0.0, bottom: 0.0 }, padding: Rect { left: 0.0, right: 0.0, top: 0.0, bottom: 0.0 } }
Node Frame 6 1:
Layout { order: 0, location: Point { x: 500.0, y: 387.0 }, size: Size { width: 70.0, height: 40.0 }, scrollbar_size: Size { width: 0.0, height: 0.0 }, border: Rect { left: 0.0, right: 0.0, top: 0.0, bottom: 0.0 }, padding: Rect { left: 10.0, right: 10.0, top: 10.0, bottom: 10.0 } }
Node Frame 7 2:
Layout { order: 0, location: Point { x: 10.0, y: -5.0 }, size: Size { width: 50.0, height: 50.0 }, scrollbar_size: Size { width: 0.0, height: 0.0 }, border: Rect { left: 0.0, right: 0.0, top: 0.0, bottom: 0.0 }, padding: Rect { left: 10.0, right: 10.0, top: 10.0, bottom: 10.0 } }
- When the
outerframe's flex direction is column, height doesn't measure right. When the flex direction is row, width doesn't measure right. - It reproduces when the
containeris fixed size or the container is auto sizing with a different flex direction.
