100% height nodes overflow below certain window height #8017

doup · 2023-03-10T09:04:48Z

Bevy version

0.11.0-dev (7d9cb1c)

What you did

A root wrapper 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??

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>

The text was updated successfully, but these errors were encountered:

nicoburns · 2023-03-10T12:21:52Z

@doup I'll look into this later, but consider using Stretch alignment rather than 100% width/height where possible. This example works fine if you remove the height: 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.

nicoburns · 2023-03-10T14:06:39Z

This is fixed in Taffy v0.3.7 please cargo update to get the fix.

doup · 2023-03-13T07:31:35Z

Shouldn't this be kept open until Taffy is upgraded?

nicoburns · 2023-03-13T12:22:37Z

@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 · 2023-03-13T13:17:37Z

Ah, I though that X.Y.Z pinned to patch. I see it's actually a range: >=0.3.5, <0.4.0 👍

* Fix layout of direct flex children with `display:none` set (#380) * Add test for toggling display:none * Add test for toggling display:none on a flexbox child * Fix layout direct flex children with `display:none` set * Add test for toggling display:none on flexbox container * Fix setting display:none on a grid child (#382) * Prepare for 0.3.5 release (#381) * Prepare for 0.3.5 release * Add grid PR to release notes * Ignore align_content in non-wrapping flexbox containers (#383) * Add tests for bevyengine/bevy#7976 * Simplify code in compute_constants * Ignore align_contents if flex_wrap is set to no_wrap * Remove commented out code * Prepare for v0.3.6 release (#384) * Use mutable slice rather mutable vec parameter * Reduce style accesses (#386) * Use cached flex_grow and flex_shrink values when resolving flexible lengths * Cache auto margins on FlexItem struct * Use constants.is_wrap instead of re-resolving style * Use cached align_content value rather than re-resolving style * Cache justify_content style in AlgoConstants * Add failing tests for borders flooring node size * Add failing tests for padding flooring node size * Fix divide by zero in main size determination * Add seperate leaf and flexbox tests for padding/border flooring node size * Fix padding/border flooring leaf node size * Fix flexbox children being floored by padding/border * Combine padding and border tests + make edge dimensions uneven * Add padding/border floor absolute child size * Add padding/border floor node size tests for grid * Add grid container test for padding/border flooring node size * Fix padding/border flooring size of absolutely positioned children * Rename grid padding/border tests so that they are all located together * Make padding/border floor node size for grid children * Make padding/border floor node size for grid containers * Apply aspect ratio to leaf nodes whose size is determined by padding/border sum * Add test for padding/border not affecting flex basis * Convert flex basis determination to use break from block * Add test for flex-basis 0 with flex grow * Floor flex-basis limits by preferred size style value when determining flex container main size * Floor outer flex-basis by padding_border sum (floors inner flex-basis at 0) * Remove commented out code * Add missing 0 * Test cases for bevyengine/bevy#8017 and Taffy #387 * Prevent percentage sizes from contributing a flex item's min-content size * Prepare for 0.3.7 release (#389) * Prepare for 0.3.7 release * Fix duplicate content in the changelog * Fix markdown lint * Upgrade to better Github Actions for faster and better maintained CI (#390) * Use taiki-e/install-action for installing cargo-deny * Update CI to use dtolnay/rust-toolchain action * Enable CI for 0.3.x branch * Fix documentation CI * Dummy Cargo.toml change * Add fully reduced test case for #387 (#391) * Fix wrapping nodes generating an incorrect min-content size (#395) * Add tests for bevyengine/bevy#8082 * Debug log parent size * Pass correct cross-axis parent_size/available_space when computing a flex item's min-content contribution * Prepare for 0.3.8 release (#396) * Don't allow cached results to be used for sizings with greater available space (#397) * Don't allow cached results to be used for sizings with greater available space * Update caching tests to use tree 100 nodes deep (relax permitted measure count to 7) * Prepare for 0.3.9 release (#398) * Prepare for 0.3.9 release * Add bevyengine/bevy#8124 to release notes * Allow multiple syn versions * Tree creation benchmarks (#401) * Add tree creation benchmarks * Rename allocation benchmark to tree_creation * Update rstest requirement from 0.16.0 to 0.17.0 (#402) Updates the requirements on [rstest](https://github.com/la10736/rstest) to permit the latest version. - [Release notes](https://github.com/la10736/rstest/releases) - [Changelog](https://github.com/la10736/rstest/blob/master/CHANGELOG.md) - [Commits](la10736/rstest@0.16.0...0.17.0) --- updated-dependencies: - dependency-name: rstest dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Update syn requirement from 1.0.7 to 2.0.4 (#403) Updates the requirements on [syn](https://github.com/dtolnay/syn) to permit the latest version. - [Release notes](https://github.com/dtolnay/syn/releases) - [Commits](dtolnay/syn@1.0.7...2.0.4) --- updated-dependencies: - dependency-name: syn dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Fix: available space in the presence of a min width (#407) * Add `with_main` and `with_cross` methods to Size * Add test for min_width > available_space * Clamp available cross space by min/max height when computing flex basis * Clamp available cross space by min/max size when computing hypothetical cross size * Bump measure func call counts to 8 * Prepare for 0.3.10 release (#411) * Fix import lints (#416) (cherry picked from commit 5522573) * Add caching to CI (#418) * Optimise flexbox layouts with min/max sizes (#413) * Remove 2-pass min/max code path + implement main size min/max clamping within determine_container_main_size method * Fix typo in flex_grow_within_constrained_min_max_column test * Implement cross-size min/max clamping inline in algorithm * Remove debug log * Remove commented code * Prepare for 0.3.11 release (#419) --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Andreas Weibye <13300393+Weibye@users.noreply.github.com> Co-authored-by: TimJentzsch <commits@timjen.net>

doup added C-Bug An unexpected or incorrect behavior S-Needs-Triage This issue needs to be labelled labels Mar 10, 2023

doup mentioned this issue Mar 10, 2023

UI text wrapping and LineBreakOn example #7761

Merged

james7132 added A-UI Graphical user interfaces, styles, layouts, and widgets and removed S-Needs-Triage This issue needs to be labelled labels Mar 10, 2023

doup mentioned this issue Mar 10, 2023

Bevy: 100% height nodes overflow below certain window height (reproduction) DioxusLabs/taffy#387

Closed

nicoburns added a commit to nicoburns/taffy that referenced this issue Mar 10, 2023

Test cases for bevyengine/bevy#8017 and Taffy DioxusLabs#387

b09bfd9

nicoburns mentioned this issue Mar 10, 2023

Prevent percentages contributing to min-content sizes DioxusLabs/taffy#388

Merged

alice-i-cecile closed this as completed in DioxusLabs/taffy#388 Mar 10, 2023

doup mentioned this issue Mar 13, 2023

Upgrade Taffy to 0.3.7 #8071

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

100% height nodes overflow below certain window height #8017

100% height nodes overflow below certain window height #8017

doup commented Mar 10, 2023

nicoburns commented Mar 10, 2023

nicoburns commented Mar 10, 2023

doup commented Mar 13, 2023

nicoburns commented Mar 13, 2023

doup commented Mar 13, 2023

100% height nodes overflow below certain window height #8017

100% height nodes overflow below certain window height #8017

Comments

doup commented Mar 10, 2023

Bevy version

What you did

What went wrong

Additional information

nicoburns commented Mar 10, 2023

nicoburns commented Mar 10, 2023

doup commented Mar 13, 2023

nicoburns commented Mar 13, 2023

doup commented Mar 13, 2023