Skip to content

[css-multicol-2] column-height and nested fragmentation #11977

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.

Sign up for GitHub

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

Jump to bottom
Open
mstensho opened this issue Mar 21, 2025 · 0 comments
Open

[css-multicol-2] column-height and nested fragmentation #11977

mstensho opened this issue Mar 21, 2025 · 0 comments
Labels
css-multicol-2

Comments

@mstensho
Copy link
Contributor

How should column-height be handled if the multicol container is nested inside another fragmentation context (e.g. pagination, or another multicol container)? If an outer break is inserted in the middle of an inner row, should a new inner row be created from scratch in the next outer fragmentainer (option 1 below), or should it resume and use whatever is left (option 2 below)?

<!DOCTYPE html>
<style>
  #outer {
    columns: 2;
    column-fill: auto;
    height: 160px;
    line-height: 20px;
    orphans: 1;
    widows: 1;
    column-rule: solid;
  }
  #inner {
    columns: 1;
    column-fill: auto;
    column-height: 80px;
    column-wrap: wrap;
    row-gap: 40px;
  }
</style>
<div id="outer">
  <div id="inner">
    <div style="background:hotpink;">
      a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>j<br>k<br>
    </div>
  </div>
</div>

Option 1 (restart from scratch):

Image

Option 2 (resume what's left):

Image

@rachelandrew
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-multicol-2
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@fantasai @mstensho