Repository navigation
100% height nodes overflow below certain window height #8017
Description
Bevy version
- 0.11.0-dev (7d9cb1c)
What you did
- A
rootwrapper with:
flex-direction: column;
size: 100% 100%;
padding: 8px
gap: 8px;
background-color: black;
- Inside, two rows with:
size: 100% 50%;
gap: 8px;
- Inside these rows, two columns, each with:
size: 100% 100%;
background-color: gray;
What went wrong
WIDTH works correctly. But HEIGHT overflows.
When window height is big enough, everything is OK:
When window height is below certain value (not sure which one, maybe window.height + 2 * gap?) it start to overflow:
Additional information
Related issues??
- A flex column nested inside a flex row results in unexpected layout calculation #4237
- Invalid ui node size when creating tree with 5-level depth and 100% height #7994
Working HTML example
<!DOCTYPE html>
<html>
<head>
<title>Bevy Percent Height</title>
<style>
/* Reset */
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
}
.root {
display: flex;
flex-direction: column;
gap: 8px;
width: 100vw;
height: 100vh;
padding: 8px;
background-color: black;
}
.row {
display: flex;
gap: 8px;
width: 100%;
height: 50%;
}
.col {
width: 100%;
height: 100%;
background-color: grey;
}
</style>
</head>
<body>
<div class="root">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</body>
</html>
Activity
nicoburns commentedon Mar 10, 2023
@doup I'll look into this later, but consider using
Stretchalignment rather than 100% width/height where possible. This example works fine if you remove theheight: 100%from the inner nodes. Although, having said that, this is really useful for generating test cases for Taffy. So perhaps it is good to continue as you are.Test cases for bevyengine/bevy#8017 and Taffy DioxusLabs#387
nicoburns commentedon Mar 10, 2023
This is fixed in Taffy
v0.3.7pleasecargo updateto get the fix.doup commentedon Mar 13, 2023
Shouldn't this be kept open until Taffy is upgraded?
nicoburns commentedon Mar 13, 2023
@doup It doesn’t really need to be because the fix is in a semver-compatible patch release. So users can get the fix by running
cargo update, and any newly created projects will get it automatically. It’s still a good idea to bump the version req in bevy, but it’s effectively fixed even without that.doup commentedon Mar 13, 2023
Ah, I though that
X.Y.Zpinned to patch. I see it's actually a range:>=0.3.5, <0.4.0👍Update 0.3.x for 0.3.11 (#455)