Clarify interaction between collapsing and multi-line containers #36791
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
Content:CSS
estelle
reviewed
Nov 15, 2024
files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
Outdated
Show resolved
Hide resolved
…_of_flex_items/index.md
|
Preview URLs (comment last updated: 2024-12-18 20:12:38) |
…_of_flex_items/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
estelle
reviewed
Dec 13, 2024
There was a problem hiding this comment.
Hi @shardulc,
Apologies for not getting back to this sooner. When you are ready for a re-review, if you click on the icon (that looks like a refresh page icon now, but may look like a document icon in red if changes are required) next to the reviewer's name, that lets the review know it is ready for a re-review.
I made several suggestions to hopefully make is super clear what is going on. I'm hoping it is so clear that even if someone doesn't have Firefox, it's described well enough that they may understand what is happening. If that's the case, we got it right.
files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
Show resolved
Hide resolved
…_of_flex_items/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
github-actions
bot
added
size/m
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
Show resolved
Hide resolved
…_of_flex_items/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
estelle
approved these changes
Dec 18, 2024
|
Thanks for working on this too! Sorry I didn't respond to your review in time, it was on my holiday TODO list 😅 |
shardulc
commented
Dec 19, 2024
| @@ -261,16 +261,24 @@ The flexbox specification details what should happen if a flex item is collapsed | |||
|
|
|||
| This behavior is useful if you want to target flex items using JavaScript to show and hide content for example. The example in the specification demonstrates one such pattern. | |||
|
|
|||
| In the following live example, I have a non-wrapped flex container. The third item has more content than the others yet is set to `visibility: collapse`; therefore, the flex container is retaining a _strut_ of the height required to display this item. If you remove `visibility: collapse` from the CSS or change the value to `visible`, you will see the item appear, and the space is redistributed between non-collapsed items; the height of the flex container should not change. | |||
| In the following live example, the non-wrapping flex container contains a row with three flex items that are set to flex to equal sizes. The third item has multiple lines of content, growing the container. The default for `align-items` is `normal`; for flex items, `normal` behaves as `stretch`, so all the items stretch by default, filling the container's cross-size height. | |||
There was a problem hiding this comment.
"the non-wrapping flex container contains a row with three flex items": I wonder if it could be confusing to say it contains a row, when really it is just a single row, being a single-line flex container.
|
|
||
| This means that items might end up on a different line to the one they started on. In the case of an item being shown and hidden it could well cause the items to end up in a different row. | ||
| The following example shows this behavior. The third flex item is collapsed, so it occupies zero space along the main axis (the inline-size is `0`). When collapsed, its strut is on the first row after the fourth item, with the first row being tall enough to fit the three lines of text that the third item would have had. Then, if you uncollapse the item (e.g. by removing the `collapse` class), there is no longer enough horizontal space for the fifth item on the first row, and it moves to the second. This causes the second row to grow to fit the two lines of text of its new member, and the last flex item is pushed onto a new row. With a taller second line and a new third line, the flex container is much taller than it was before. |
There was a problem hiding this comment.
The description does not match the demo (at least for me, on Firefox), but it does if the width of the container is increased from 500px to 520px.
allan-bonadio
pushed a commit
to allan-bonadio/content
that referenced
this pull request
Dec 25, 2024
…#36791) * Clarify interaction between collapsing and multi-line containers * Update files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md * Update files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Apply suggestions from code review * Update files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * add toggle for visibility collapse * toggle button for example * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * change class name to collapse --------- Co-authored-by: Estelle Weyl <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
I'm not entirely sure what the preëxisting example intended to demonstrate, so I changed it and its description to illustrate the spec quoted right above it. Let me know if there's some aspect of the spec that this example doesn't cover.
Motivation
As it stands, I find the second example a bit confusing.
Additional details
Relevant section of the CSS flexbox specification in the Editors’ Draft and the published CR.