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

Bad layout of CSS "flex" #919

Closed
mPyth opened this issue Aug 12, 2019 · 1 comment

Comments

@mPyth
Copy link

commented Aug 12, 2019

Here are the Chrome screenshots that demonstrate intention for using vertical flex.
intentionForUsingFlex
On the left side is example of Contract with body (light-green) that could vary a few lines. The goal is to keep the signature section at the bottom of the page (light-purple), independently of how much lines contract body has. On the right side is exactly same CSS and HTML with only added lines "Line 8" and "Line 9". Only yellow-light div has "flex-grow" set to 1, so it takes the rest space from the parent.

For all examples here file flexDemo.zip is used.


Next two screenshots are taken from Chrome. To get screenshot on the left class "vertFlex" should be removed from the HTML (from root div), so layout will be standard "block" (there is no need to remove "takeTheRestVertSpace" class from HTML because its parent is not "flex" so it will be ignored).
flexExpectedBehavior
Remark: the root div has light-cyan background – it is possible to see it on the left screenshot – area on the bottom.
On the right is the screenshot with the same file but with "vertFlex" class put back to root div element. It is important to notice next changes:

  • all sections with exception of light yellow has the same height
  • the whole document has the same height
  • after root div got "vertFlex" its child with "flex-grow" set to 1 takes the all the space from the root div, so light-cyan area does not exist any more.

Below are screenshots which are created by using WeasyPrint Renderer (simple copy-paste from mentioned file). On the left class "vertFlex" is removed from root div, on the right "vertFlex" is put back.
flexBehaviorInWeasyPrint
It is possible to observe next changes:

  • 1st section (Contract Title) has no the same height - NOT expected behavior
  • root div height becomes larger – NOT expected behavior
  • 2nd (light green) and 4th section (light-purple) has the same height as before change – this is expected behavior.
  • light-cyan area is not visible any more – this is expected behavior
  • light-yelow div takes more space than before – this is expected behavior

Problem is reproduced by using Windows 10, Python 3.7.3 and WeasyPrint 48.

@liZe liZe added the bug label Aug 12, 2019

@liZe liZe closed this in 440070b Aug 14, 2019

@liZe liZe added this to the 49 milestone Aug 14, 2019

@liZe

This comment has been minimized.

Copy link
Member

commented Aug 14, 2019

Thanks for the perfect bug report! It was just a stupid typo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
2 participants
You can’t perform that action at this time.