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
Closed

Bad layout of CSS "flex" #919

mPyth opened this issue Aug 12, 2019 · 1 comment
Labels
Milestone

Comments

@mPyth
Copy link
Contributor

@mPyth mPyth 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
Copy link
Member

@liZe liZe commented Aug 14, 2019

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

Loading

netbsd-srcmastr pushed a commit to NetBSD/pkgsrc that referenced this issue Oct 9, 2019
Version 50
----------

Released on 2019-09-19.

New features:

* `#209 <https://github.com/Kozea/WeasyPrint/issues/209>`_:
  Make ``break-*`` properties work inside tables
* `#661 <https://github.com/Kozea/WeasyPrint/issues/661>`_:
  Make blocks with ``overflow: auto`` grow to include floating children

Bug fixes:

* `#945 <https://github.com/Kozea/WeasyPrint/issues/945>`_:
  Don't break pages between a list item and its marker
* `#727 <https://github.com/Kozea/WeasyPrint/issues/727>`_:
  Avoid tables lost between pages
* `#831 <https://github.com/Kozea/WeasyPrint/issues/831>`_:
  Ignore auto margins on flex containers
* `#923 <https://github.com/Kozea/WeasyPrint/issues/923>`_:
  Fix a couple of crashes when splitting a line twice
* `#896 <https://github.com/Kozea/WeasyPrint/issues/896>`_:
  Fix skip stack order when using a reverse flex direction

Contributors:

- grewn0uille
- Guillaume Ayoub

Version 49
----------

Released on 2019-09-11.

Performance:

* Speed and memory use have been largely improved.

New features:

* `#700 <https://github.com/Kozea/WeasyPrint/issues/700>`_:
  Handle ``::marker`` pseudo-selector
* `135dc06c <https://github.com/Kozea/WeasyPrint/commit/135dc06c>`_:
  Handle ``recto`` and ``verso`` parameters for page breaks
* `#907 <https://github.com/Kozea/WeasyPrint/pull/907>`_:
  Provide a clean way to build layout contexts

Bug fixes:

* `#937 <https://github.com/Kozea/WeasyPrint/issues/937>`_:
  Fix rendering of tables with empty lines and rowspans
* `#897 <https://github.com/Kozea/WeasyPrint/issues/897>`_:
  Don't crash when small columns are wrapped in absolute blocks
* `#913 <https://github.com/Kozea/WeasyPrint/issues/913>`_:
  Fix a test about gradient colors
* `#924 <https://github.com/Kozea/WeasyPrint/pull/924>`_:
  Fix title for document with attachments
* `#917 <https://github.com/Kozea/WeasyPrint/issues/917>`_:
  Fix tests with Pango 1.44
* `#919 <https://github.com/Kozea/WeasyPrint/issues/919>`_:
  Fix padding and margin management for column flex boxes
* `#901 <https://github.com/Kozea/WeasyPrint/issues/901>`_:
  Fix width of replaced boxes with no intrinsic width
* `#906 <https://github.com/Kozea/WeasyPrint/issues/906>`_:
  Don't respect table cell width when content doesn't fit
* `#927 <https://github.com/Kozea/WeasyPrint/pull/927>`_:
  Don't use deprecated ``logger.warn`` anymore
* `a8662794 <https://github.com/Kozea/WeasyPrint/commit/a8662794>`_:
  Fix margin collapsing between caption and table wrapper
* `87d9e84f <https://github.com/Kozea/WeasyPrint/commit/87d9e84f>`_:
  Avoid infinite loops when rendering columns
* `789b80e6 <https://github.com/Kozea/WeasyPrint/commit/789b80e6>`_:
  Only use in flow children to set columns height
* `615e298a <https://github.com/Kozea/WeasyPrint/commit/615e298a>`_:
  Don't include floating elements each time we try to render a column
* `48d8632e <https://github.com/Kozea/WeasyPrint/commit/48d8632e>`_:
  Avoid not in flow children to compute column height
* `e7c452ce <https://github.com/Kozea/WeasyPrint/commit/e7c452ce>`_:
  Fix collapsing margins for columns
* `fb0887cf <https://github.com/Kozea/WeasyPrint/commit/fb0887cf>`_:
  Fix crash when using currentColor in gradients
* `f66df067 <https://github.com/Kozea/WeasyPrint/commit/f66df067>`_:
  Don't crash when using ex units in word-spacing in letter-spacing
* `c790ff20 <https://github.com/Kozea/WeasyPrint/commit/c790ff20>`_:
  Don't crash when properties needing base URL use var functions
* `d63eac31 <https://github.com/Kozea/WeasyPrint/commit/d63eac31>`_:
  Don't crash with object-fit: non images with no intrinsic size

Documentation:

* `#900 <https://github.com/Kozea/WeasyPrint/issues/900>`_:
  Add documentation about semantic versioning
* `#692 <https://github.com/Kozea/WeasyPrint/issues/692>`_:
  Add a snippet about PDF magnification
* `#899 <https://github.com/Kozea/WeasyPrint/pull/899>`_:
  Add .NET wrapper link
* `#893 <https://github.com/Kozea/WeasyPrint/pull/893>`_:
  Fixed wrong nested list comprehension example
* `#902 <https://github.com/Kozea/WeasyPrint/pull/902>`_:
  Add ``state`` to the ``make_bookmark_tree`` documentation
* `#921 <https://github.com/Kozea/WeasyPrint/pull/921>`_:
  Fix typos in the documentation
* `#328 <https://github.com/Kozea/WeasyPrint/issues/328>`_:
  Add CSS sample for forms

Contributors:

- grewn0uille
- Guillaume Ayoub
- Raphael Gaschignard
- Stani
- Szmen
- Thomas Dexter
- Tontyna

Version 48
----------

Released on 2019-07-08.

Dependencies:

* CairoSVG 2.4.0+ is now needed

New features:

* `#891 <https://github.com/Kozea/WeasyPrint/pull/891>`_:
  Handle ``text-overflow``
* `#878 <https://github.com/Kozea/WeasyPrint/pull/878>`_:
  Handle ``column-span``
* `#855 <https://github.com/Kozea/WeasyPrint/pull/855>`_:
  Handle all the ``text-decoration`` features
* `#238 <https://github.com/Kozea/WeasyPrint/issues/238>`_:
  Don't repeat background images when it's not needed
* `#875 <https://github.com/Kozea/WeasyPrint/issues/875>`_:
  Handle ``object-fit`` and ``object-position``
* `#870 <https://github.com/Kozea/WeasyPrint/issues/870>`_:
  Handle ``bookmark-state``

Bug fixes:

* `#686 <https://github.com/Kozea/WeasyPrint/issues/686>`_:
  Fix column balance when children are not inline
* `#885 <https://github.com/Kozea/WeasyPrint/issues/885>`_:
  Actually use the content box to resolve flex items percentages
* `#867 <https://github.com/Kozea/WeasyPrint/issues/867>`_:
  Fix rendering of KaTeX output, including (1) set row baseline of tables when
  no cells are baseline-aligned, (2) set baseline for inline tables, (3) don't
  align lines larger than their parents, (4) force CairoSVG to respect image
  size defined by CSS.
* `#873 <https://github.com/Kozea/WeasyPrint/issues/873>`_:
  Set a minimum height for empty list elements with outside marker
* `#811 <https://github.com/Kozea/WeasyPrint/issues/811>`_:
  Don't use translations to align flex items
* `#851 <https://github.com/Kozea/WeasyPrint/issues/851>`_,
  `#860 <https://github.com/Kozea/WeasyPrint/issues/860>`_:
  Don't cut pages when content overflows a very little bit
* `#862 <https://github.com/Kozea/WeasyPrint/issues/862>`_:
  Don't crash when using UTC dates in metadata

Documentation:

* `#854 <https://github.com/Kozea/WeasyPrint/issues/854>`_:
  Add a "Tips & Tricks" section

Contributors:

- Gabriel Corona
- Guillaume Ayoub
- Manuel Barkhau
- Nathan de Maestri
- grewn0uille
- theopeek

Version 47
----------

Released on 2019-04-12.

New features:

* `#843 <https://github.com/Kozea/WeasyPrint/pull/843>`_:
  Handle CSS variables
* `#846 <https://github.com/Kozea/WeasyPrint/pull/846>`_:
  Handle ``:nth()`` page selector
* `#847 <https://github.com/Kozea/WeasyPrint/pull/847>`_:
  Allow users to use a custom SSL context for HTTP requests

Bug fixes:

* `#797 <https://github.com/Kozea/WeasyPrint/issues/797>`_:
  Fix underlined justified text
* `#836 <https://github.com/Kozea/WeasyPrint/issues/836>`_:
  Fix crash when flex items are replaced boxes
* `#835 <https://github.com/Kozea/WeasyPrint/issues/835>`_:
  Fix ``margin-break: auto``

Version 46
----------

Released on 2019-03-20.

New features:

* `#771 <https://github.com/Kozea/WeasyPrint/issues/771>`_:
  Handle ``box-decoration-break``
* `#115 <https://github.com/Kozea/WeasyPrint/issues/115>`_:
  Handle ``margin-break``
* `#821 <https://github.com/Kozea/WeasyPrint/issues/821>`_:
  Continuous integration includes tests on Windows

Bug fixes:

* `#765 <https://github.com/Kozea/WeasyPrint/issues/765>`_,
  `#754 <https://github.com/Kozea/WeasyPrint/issues/754>`_,
  `#800 <https://github.com/Kozea/WeasyPrint/issues/800>`_:
  Fix many crashes related to the flex layout
* `#783 <https://github.com/Kozea/WeasyPrint/issues/783>`_:
  Fix a couple of crashes with strange texts
* `#827 <https://github.com/Kozea/WeasyPrint/pull/827>`_:
  Named strings and counters are case-sensitive
* `#823 <https://github.com/Kozea/WeasyPrint/pull/823>`_:
  Shrink min/max-height/width according to box-sizing
* `#728 <https://github.com/Kozea/WeasyPrint/issues/728>`_,
  `#171 <https://github.com/Kozea/WeasyPrint/issues/171>`_:
  Don't crash when fixed boxes are nested
* `#610 <https://github.com/Kozea/WeasyPrint/issues/610>`_,
  `#828 <https://github.com/Kozea/WeasyPrint/issues/828>`_:
  Don't crash when preformatted text lines end with a space
* `#808 <https://github.com/Kozea/WeasyPrint/issues/808>`_,
  `#387 <https://github.com/Kozea/WeasyPrint/issues/387>`_:
  Fix position of some images
* `#813 <https://github.com/Kozea/WeasyPrint/issues/813>`_:
  Don't crash when long preformatted text lines end with ``\n``

Documentation:

* `#815 <https://github.com/Kozea/WeasyPrint/pull/815>`_:
  Add documentation about custom ``url_fetcher``
netbsd-srcmastr pushed a commit to NetBSD/pkgsrc that referenced this issue Oct 18, 2019
Version 50
----------

Released on 2019-09-19.

New features:

* `#209 <https://github.com/Kozea/WeasyPrint/issues/209>`_:
  Make ``break-*`` properties work inside tables
* `#661 <https://github.com/Kozea/WeasyPrint/issues/661>`_:
  Make blocks with ``overflow: auto`` grow to include floating children

Bug fixes:

* `#945 <https://github.com/Kozea/WeasyPrint/issues/945>`_:
  Don't break pages between a list item and its marker
* `#727 <https://github.com/Kozea/WeasyPrint/issues/727>`_:
  Avoid tables lost between pages
* `#831 <https://github.com/Kozea/WeasyPrint/issues/831>`_:
  Ignore auto margins on flex containers
* `#923 <https://github.com/Kozea/WeasyPrint/issues/923>`_:
  Fix a couple of crashes when splitting a line twice
* `#896 <https://github.com/Kozea/WeasyPrint/issues/896>`_:
  Fix skip stack order when using a reverse flex direction

Contributors:

- grewn0uille
- Guillaume Ayoub

Version 49
----------

Released on 2019-09-11.

Performance:

* Speed and memory use have been largely improved.

New features:

* `#700 <https://github.com/Kozea/WeasyPrint/issues/700>`_:
  Handle ``::marker`` pseudo-selector
* `135dc06c <https://github.com/Kozea/WeasyPrint/commit/135dc06c>`_:
  Handle ``recto`` and ``verso`` parameters for page breaks
* `#907 <https://github.com/Kozea/WeasyPrint/pull/907>`_:
  Provide a clean way to build layout contexts

Bug fixes:

* `#937 <https://github.com/Kozea/WeasyPrint/issues/937>`_:
  Fix rendering of tables with empty lines and rowspans
* `#897 <https://github.com/Kozea/WeasyPrint/issues/897>`_:
  Don't crash when small columns are wrapped in absolute blocks
* `#913 <https://github.com/Kozea/WeasyPrint/issues/913>`_:
  Fix a test about gradient colors
* `#924 <https://github.com/Kozea/WeasyPrint/pull/924>`_:
  Fix title for document with attachments
* `#917 <https://github.com/Kozea/WeasyPrint/issues/917>`_:
  Fix tests with Pango 1.44
* `#919 <https://github.com/Kozea/WeasyPrint/issues/919>`_:
  Fix padding and margin management for column flex boxes
* `#901 <https://github.com/Kozea/WeasyPrint/issues/901>`_:
  Fix width of replaced boxes with no intrinsic width
* `#906 <https://github.com/Kozea/WeasyPrint/issues/906>`_:
  Don't respect table cell width when content doesn't fit
* `#927 <https://github.com/Kozea/WeasyPrint/pull/927>`_:
  Don't use deprecated ``logger.warn`` anymore
* `a8662794 <https://github.com/Kozea/WeasyPrint/commit/a8662794>`_:
  Fix margin collapsing between caption and table wrapper
* `87d9e84f <https://github.com/Kozea/WeasyPrint/commit/87d9e84f>`_:
  Avoid infinite loops when rendering columns
* `789b80e6 <https://github.com/Kozea/WeasyPrint/commit/789b80e6>`_:
  Only use in flow children to set columns height
* `615e298a <https://github.com/Kozea/WeasyPrint/commit/615e298a>`_:
  Don't include floating elements each time we try to render a column
* `48d8632e <https://github.com/Kozea/WeasyPrint/commit/48d8632e>`_:
  Avoid not in flow children to compute column height
* `e7c452ce <https://github.com/Kozea/WeasyPrint/commit/e7c452ce>`_:
  Fix collapsing margins for columns
* `fb0887cf <https://github.com/Kozea/WeasyPrint/commit/fb0887cf>`_:
  Fix crash when using currentColor in gradients
* `f66df067 <https://github.com/Kozea/WeasyPrint/commit/f66df067>`_:
  Don't crash when using ex units in word-spacing in letter-spacing
* `c790ff20 <https://github.com/Kozea/WeasyPrint/commit/c790ff20>`_:
  Don't crash when properties needing base URL use var functions
* `d63eac31 <https://github.com/Kozea/WeasyPrint/commit/d63eac31>`_:
  Don't crash with object-fit: non images with no intrinsic size

Documentation:

* `#900 <https://github.com/Kozea/WeasyPrint/issues/900>`_:
  Add documentation about semantic versioning
* `#692 <https://github.com/Kozea/WeasyPrint/issues/692>`_:
  Add a snippet about PDF magnification
* `#899 <https://github.com/Kozea/WeasyPrint/pull/899>`_:
  Add .NET wrapper link
* `#893 <https://github.com/Kozea/WeasyPrint/pull/893>`_:
  Fixed wrong nested list comprehension example
* `#902 <https://github.com/Kozea/WeasyPrint/pull/902>`_:
  Add ``state`` to the ``make_bookmark_tree`` documentation
* `#921 <https://github.com/Kozea/WeasyPrint/pull/921>`_:
  Fix typos in the documentation
* `#328 <https://github.com/Kozea/WeasyPrint/issues/328>`_:
  Add CSS sample for forms

Contributors:

- grewn0uille
- Guillaume Ayoub
- Raphael Gaschignard
- Stani
- Szmen
- Thomas Dexter
- Tontyna

Version 48
----------

Released on 2019-07-08.

Dependencies:

* CairoSVG 2.4.0+ is now needed

New features:

* `#891 <https://github.com/Kozea/WeasyPrint/pull/891>`_:
  Handle ``text-overflow``
* `#878 <https://github.com/Kozea/WeasyPrint/pull/878>`_:
  Handle ``column-span``
* `#855 <https://github.com/Kozea/WeasyPrint/pull/855>`_:
  Handle all the ``text-decoration`` features
* `#238 <https://github.com/Kozea/WeasyPrint/issues/238>`_:
  Don't repeat background images when it's not needed
* `#875 <https://github.com/Kozea/WeasyPrint/issues/875>`_:
  Handle ``object-fit`` and ``object-position``
* `#870 <https://github.com/Kozea/WeasyPrint/issues/870>`_:
  Handle ``bookmark-state``

Bug fixes:

* `#686 <https://github.com/Kozea/WeasyPrint/issues/686>`_:
  Fix column balance when children are not inline
* `#885 <https://github.com/Kozea/WeasyPrint/issues/885>`_:
  Actually use the content box to resolve flex items percentages
* `#867 <https://github.com/Kozea/WeasyPrint/issues/867>`_:
  Fix rendering of KaTeX output, including (1) set row baseline of tables when
  no cells are baseline-aligned, (2) set baseline for inline tables, (3) don't
  align lines larger than their parents, (4) force CairoSVG to respect image
  size defined by CSS.
* `#873 <https://github.com/Kozea/WeasyPrint/issues/873>`_:
  Set a minimum height for empty list elements with outside marker
* `#811 <https://github.com/Kozea/WeasyPrint/issues/811>`_:
  Don't use translations to align flex items
* `#851 <https://github.com/Kozea/WeasyPrint/issues/851>`_,
  `#860 <https://github.com/Kozea/WeasyPrint/issues/860>`_:
  Don't cut pages when content overflows a very little bit
* `#862 <https://github.com/Kozea/WeasyPrint/issues/862>`_:
  Don't crash when using UTC dates in metadata

Documentation:

* `#854 <https://github.com/Kozea/WeasyPrint/issues/854>`_:
  Add a "Tips & Tricks" section

Contributors:

- Gabriel Corona
- Guillaume Ayoub
- Manuel Barkhau
- Nathan de Maestri
- grewn0uille
- theopeek

Version 47
----------

Released on 2019-04-12.

New features:

* `#843 <https://github.com/Kozea/WeasyPrint/pull/843>`_:
  Handle CSS variables
* `#846 <https://github.com/Kozea/WeasyPrint/pull/846>`_:
  Handle ``:nth()`` page selector
* `#847 <https://github.com/Kozea/WeasyPrint/pull/847>`_:
  Allow users to use a custom SSL context for HTTP requests

Bug fixes:

* `#797 <https://github.com/Kozea/WeasyPrint/issues/797>`_:
  Fix underlined justified text
* `#836 <https://github.com/Kozea/WeasyPrint/issues/836>`_:
  Fix crash when flex items are replaced boxes
* `#835 <https://github.com/Kozea/WeasyPrint/issues/835>`_:
  Fix ``margin-break: auto``

Version 46
----------

Released on 2019-03-20.

New features:

* `#771 <https://github.com/Kozea/WeasyPrint/issues/771>`_:
  Handle ``box-decoration-break``
* `#115 <https://github.com/Kozea/WeasyPrint/issues/115>`_:
  Handle ``margin-break``
* `#821 <https://github.com/Kozea/WeasyPrint/issues/821>`_:
  Continuous integration includes tests on Windows

Bug fixes:

* `#765 <https://github.com/Kozea/WeasyPrint/issues/765>`_,
  `#754 <https://github.com/Kozea/WeasyPrint/issues/754>`_,
  `#800 <https://github.com/Kozea/WeasyPrint/issues/800>`_:
  Fix many crashes related to the flex layout
* `#783 <https://github.com/Kozea/WeasyPrint/issues/783>`_:
  Fix a couple of crashes with strange texts
* `#827 <https://github.com/Kozea/WeasyPrint/pull/827>`_:
  Named strings and counters are case-sensitive
* `#823 <https://github.com/Kozea/WeasyPrint/pull/823>`_:
  Shrink min/max-height/width according to box-sizing
* `#728 <https://github.com/Kozea/WeasyPrint/issues/728>`_,
  `#171 <https://github.com/Kozea/WeasyPrint/issues/171>`_:
  Don't crash when fixed boxes are nested
* `#610 <https://github.com/Kozea/WeasyPrint/issues/610>`_,
  `#828 <https://github.com/Kozea/WeasyPrint/issues/828>`_:
  Don't crash when preformatted text lines end with a space
* `#808 <https://github.com/Kozea/WeasyPrint/issues/808>`_,
  `#387 <https://github.com/Kozea/WeasyPrint/issues/387>`_:
  Fix position of some images
* `#813 <https://github.com/Kozea/WeasyPrint/issues/813>`_:
  Don't crash when long preformatted text lines end with ``\n``

Documentation:

* `#815 <https://github.com/Kozea/WeasyPrint/pull/815>`_:
  Add documentation about custom ``url_fetcher``
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants