From 3ae34b39baad76c8618cd01f53f6dae872e9df83 Mon Sep 17 00:00:00 2001 From: Shardul Chiplunkar Date: Thu, 14 Nov 2024 19:03:24 +0100 Subject: [PATCH 01/11] Clarify interaction between collapsing and multi-line containers --- .../mastering_wrapping_of_flex_items/index.md | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md index f692ff0e2f5366b..2d4c5d13aa78379 100644 --- a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -264,7 +264,7 @@ This behavior is useful if you want to target flex items using JavaScript to sho 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. > [!NOTE] -> Use Firefox for the below two examples as Chrome and Safari treat collapse as hidden. +> Use Firefox for the example below as other common browsers treat `collapse` as `hidden`. ```html live-sample___visibility-collapse
@@ -293,24 +293,26 @@ In the following live example, I have a non-wrapped flex container. The third it {{EmbedLiveSample("visibility-collapse")}} -When dealing with multiple-line flex containers however you need to understand that the wrapping is re-done _after_ collapsing. So the browser needs to re-do the wrapping behavior to account for the new space that the collapsed item has left in the inline direction. +Note that multi-line flex containers rewrap their items after removing collapsed items from rendering. The new space that a collapsed item leaves in the inline direction may cause non-collapsed items to be placed in a different line than if the item were not collapsed. Because each line is laid out like an independent single-line flex container and its composition may change after collapsing, its cross-axis size may change too. -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 fifth flex item is collapsed, so it occupies zero horizontal space, and so there is enough space to place it on the first row after the fourth item, and so the first row becomes tall enough to fit the three lines of text that the fifth 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 it on the first row, and it moves to the second. This causes the first row to be only as tall as necessary to fit its new contents (one line) and the second row to be taller instead. Note also that the last flex item is pushed on to a new row, making the entire flex container taller than it was before. -I have created this behavior in the next live example. You can see how the stretching changes row based on the location of the collapsed item. If you add more content to the second item, it changes row once it gets long enough. That top row then only becomes as tall as a single line of text. +> [!NOTE] +> Use Firefox for the example below as other common browsers treat `collapse` as `hidden`. ```html live-sample___wrapped-visibility-collapse
One
-
Add more text to this box to make it grow
-
Three
has
extra
text
-
Four
-
Five
+
Two
+
Three
+
Four four four four four four four
+
Five
is
taller
Six
Seven
Eight
Nine
Ten
+
Eleven is longer
``` @@ -328,7 +330,7 @@ I have created this behavior in the next live example. You can see how the stret background-color: rgb(96 139 168 / 0.2); flex: 1 1 auto; } -.hide { +.collapse { visibility: collapse; } ``` From 4a3e74b401ca396e420e5b1aecfde0ec217ff24a Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 26 Nov 2024 15:28:12 -0800 Subject: [PATCH 02/11] Update files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md --- .../mastering_wrapping_of_flex_items/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md index 2d4c5d13aa78379..837fc3e4f3e7c5e 100644 --- a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -303,10 +303,10 @@ The following example shows this behavior. The fifth flex item is collapsed, so ```html live-sample___wrapped-visibility-collapse
One
-
Two
-
Three
-
Four four four four four four four
-
Five
is
taller
+
Two is the width of this sentence.
+
Three
is
five
lines
tall.
+
Four
+
Five
Six
Seven
Eight
From 1551c3abe79855f89066f5d4649b65d3bd68fd1a Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 26 Nov 2024 15:54:30 -0800 Subject: [PATCH 03/11] 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> --- .../mastering_wrapping_of_flex_items/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md index 837fc3e4f3e7c5e..dae99784cc739ba 100644 --- a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -304,7 +304,7 @@ The following example shows this behavior. The fifth flex item is collapsed, so
One
Two is the width of this sentence.
-
Three
is
five
lines
tall.
+
Three
is
five
lines
tall.
Four
Five
Six
From e28b2170b4c477090e48de8196e2870220f2c131 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 18 Dec 2024 09:17:54 -0800 Subject: [PATCH 04/11] Apply suggestions from code review --- .../mastering_wrapping_of_flex_items/index.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md index dae99784cc739ba..26af8108750ed5e 100644 --- a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -261,7 +261,9 @@ 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. + +The item creating the cross-size is set to `visibility: collapse`, which collapses or hides the flex item, depending on the browser. In either case, the flex container retains a _strut_ of the cross-size even though it is not visible. This way, if the item is made visible, the cross-size of the single-line flex container will not change. If you remove `visibility: collapse` from the CSS or change the value to `visible`, you will see the item appear, and the main-size space is redistributed between non-collapsed items, while the cross-size remains unchanged. > [!NOTE] > Use Firefox for the example below as other common browsers treat `collapse` as `hidden`. @@ -293,9 +295,9 @@ In the following live example, I have a non-wrapped flex container. The third it {{EmbedLiveSample("visibility-collapse")}} -Note that multi-line flex containers rewrap their items after removing collapsed items from rendering. The new space that a collapsed item leaves in the inline direction may cause non-collapsed items to be placed in a different line than if the item were not collapsed. Because each line is laid out like an independent single-line flex container and its composition may change after collapsing, its cross-axis size may change too. +The above was a single-line, non-wrapping flex container with a set size of `600px` so whether the item is visible or collapsed, the width is the same. It is important to understand that while the container retains a strut of the collapsed item's cross-size, the main size is not preserved. Multi-line flex containers rewrap their items after removing collapsed items from rendering. The new space that a collapsed item leaves in the main direction may cause non-collapsed items to be placed in a different line than if the item were not collapsed. Because each line is laid out like an independent single-line flex container and its composition may change after collapsing, its cross-axis size may change too. -The following example shows this behavior. The fifth flex item is collapsed, so it occupies zero horizontal space, and so there is enough space to place it on the first row after the fourth item, and so the first row becomes tall enough to fit the three lines of text that the fifth 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 it on the first row, and it moves to the second. This causes the first row to be only as tall as necessary to fit its new contents (one line) and the second row to be taller instead. Note also that the last flex item is pushed on to a new row, making the entire flex container taller than it was before. +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. > [!NOTE] > Use Firefox for the example below as other common browsers treat `collapse` as `hidden`. @@ -304,9 +306,9 @@ The following example shows this behavior. The fifth flex item is collapsed, so
One
Two is the width of this sentence.
-
Three
is
five
lines
tall.
+
Three
is
five
lines
tall.
Four
-
Five
+
Five
Five
Six
Seven
Eight
@@ -329,6 +331,7 @@ The following example shows this behavior. The fifth flex item is collapsed, so border-radius: 5px; background-color: rgb(96 139 168 / 0.2); flex: 1 1 auto; + min-width: 50px; } .collapse { visibility: collapse; From 1056e41bb7a8fbdd63487dc4e4939178ef5c75c9 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 18 Dec 2024 09:25:43 -0800 Subject: [PATCH 05/11] 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> --- .../mastering_wrapping_of_flex_items/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md index 26af8108750ed5e..886edbf9de99cb9 100644 --- a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -261,7 +261,7 @@ 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, 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. +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. The item creating the cross-size is set to `visibility: collapse`, which collapses or hides the flex item, depending on the browser. In either case, the flex container retains a _strut_ of the cross-size even though it is not visible. This way, if the item is made visible, the cross-size of the single-line flex container will not change. If you remove `visibility: collapse` from the CSS or change the value to `visible`, you will see the item appear, and the main-size space is redistributed between non-collapsed items, while the cross-size remains unchanged. From df5022d5dad3f214411758b3d7d5c3bc1a40f898 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 18 Dec 2024 09:32:00 -0800 Subject: [PATCH 06/11] add toggle for visibility collapse --- .../mastering_wrapping_of_flex_items/index.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md index 886edbf9de99cb9..c3079432e79ab70 100644 --- a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -302,6 +302,10 @@ The following example shows this behavior. The third flex item is collapsed, so > [!NOTE] > Use Firefox for the example below as other common browsers treat `collapse` as `hidden`. +```html hidden live-sample___wrapped-visibility-collapse +

+``` + ```html live-sample___wrapped-visibility-collapse
One
@@ -337,8 +341,13 @@ The following example shows this behavior. The third flex item is collapsed, so visibility: collapse; } ``` +```css hidden live-sample___wrapped-visibility-collapse +p:has(:checked) + div .collapse { + visibility: visible; +} +``` -{{EmbedLiveSample("wrapped-visibility-collapse")}} +{{EmbedLiveSample("wrapped-visibility-collapse", "", "400")}} If this causes a problem for your layout it may require a rethinking of the structure, for example putting each row into a separate flex container in order that they can't shift rows. From 8570234cb991c79669728b128775a01c75402487 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 18 Dec 2024 10:08:06 -0800 Subject: [PATCH 07/11] toggle button for example --- .../mastering_wrapping_of_flex_items/index.md | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md index c3079432e79ab70..98368e08d8ecdca 100644 --- a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -267,6 +267,10 @@ The item creating the cross-size is set to `visibility: collapse`, which collaps > [!NOTE] > Use Firefox for the example below as other common browsers treat `collapse` as `hidden`. +> +```html hidden live-sample___visibility-collapse +

+``` ```html live-sample___visibility-collapse
@@ -293,6 +297,12 @@ The item creating the cross-size is set to `visibility: collapse`, which collaps } ``` +```css hidden live-sample___visibility-collapse +p:has(:checked) + div .collapse { + visibility: visible; +} +``` + {{EmbedLiveSample("visibility-collapse")}} The above was a single-line, non-wrapping flex container with a set size of `600px` so whether the item is visible or collapsed, the width is the same. It is important to understand that while the container retains a strut of the collapsed item's cross-size, the main size is not preserved. Multi-line flex containers rewrap their items after removing collapsed items from rendering. The new space that a collapsed item leaves in the main direction may cause non-collapsed items to be placed in a different line than if the item were not collapsed. Because each line is laid out like an independent single-line flex container and its composition may change after collapsing, its cross-axis size may change too. @@ -341,17 +351,18 @@ The following example shows this behavior. The third flex item is collapsed, so visibility: collapse; } ``` + ```css hidden live-sample___wrapped-visibility-collapse p:has(:checked) + div .collapse { visibility: visible; } ``` -{{EmbedLiveSample("wrapped-visibility-collapse", "", "400")}} +{{EmbedLiveSample("wrapped-visibility-collapse", "", "300")}} -If this causes a problem for your layout it may require a rethinking of the structure, for example putting each row into a separate flex container in order that they can't shift rows. +If this causes a problem for your layout, it may require a rethinking of the structure, for example, putting each row into a separate flex container so that they can't shift rows. ### Using `visibility: hidden` and `display: none` -In previous live example, try using `visibility: hidden` or `display: none` instead of `visibility: collapse`. Using `visibility: hidden`, the item is made invisible but the box is kept in the formatting structure, so it still behaves as if it were part of the layout. +In the previous live examples, try using `visibility: hidden` or `display: none` instead of `visibility: collapse`. Using `visibility: hidden`, the item is made invisible, but the box is kept in the formatting structure, so it still behaves as if it were part of the layout. When you use `display: none`, the item is completely removed from the formatting structure. Not only is it invisible but the structure is removed as well. This means counters ignore it and things like transitions do not run. From cd07577d2941124a7e75918c4b81595d26c03a75 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 18 Dec 2024 10:08:56 -0800 Subject: [PATCH 08/11] Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../mastering_wrapping_of_flex_items/index.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md index 98368e08d8ecdca..d2ba29b5d291799 100644 --- a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -313,7 +313,9 @@ The following example shows this behavior. The third flex item is collapsed, so > Use Firefox for the example below as other common browsers treat `collapse` as `hidden`. ```html hidden live-sample___wrapped-visibility-collapse -

+

+ +

``` ```html live-sample___wrapped-visibility-collapse @@ -352,6 +354,7 @@ The following example shows this behavior. The third flex item is collapsed, so } ``` + ```css hidden live-sample___wrapped-visibility-collapse p:has(:checked) + div .collapse { visibility: visible; From 086cde889653b00a889eb60f784f7aa8e9fc3b9f Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 18 Dec 2024 12:01:03 -0800 Subject: [PATCH 09/11] Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../mastering_wrapping_of_flex_items/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md index d2ba29b5d291799..a278dbb1ec0d130 100644 --- a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -267,9 +267,10 @@ The item creating the cross-size is set to `visibility: collapse`, which collaps > [!NOTE] > Use Firefox for the example below as other common browsers treat `collapse` as `hidden`. -> ```html hidden live-sample___visibility-collapse -

+

+ +

``` ```html live-sample___visibility-collapse @@ -354,7 +355,6 @@ The following example shows this behavior. The third flex item is collapsed, so } ``` - ```css hidden live-sample___wrapped-visibility-collapse p:has(:checked) + div .collapse { visibility: visible; From 6ff974b6be24a46cf5a66161715207b8d38beb73 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 18 Dec 2024 12:04:15 -0800 Subject: [PATCH 10/11] 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> --- .../mastering_wrapping_of_flex_items/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md index a278dbb1ec0d130..133d2e932edcecf 100644 --- a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -267,6 +267,7 @@ The item creating the cross-size is set to `visibility: collapse`, which collaps > [!NOTE] > Use Firefox for the example below as other common browsers treat `collapse` as `hidden`. + ```html hidden live-sample___visibility-collapse

From 71d94dad352ecb638737447c08f1a067e9b1dd0c Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 18 Dec 2024 12:10:39 -0800 Subject: [PATCH 11/11] change class name to collapse --- .../mastering_wrapping_of_flex_items/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md index 133d2e932edcecf..cb0c146f889be07 100644 --- a/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -278,7 +278,7 @@ The item creating the cross-size is set to `visibility: collapse`, which collaps

One
Two
-
Three
has
extra
text
+
Three
has
extra
text
``` @@ -294,7 +294,7 @@ The item creating the cross-size is set to `visibility: collapse`, which collaps border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } -.hide { +.collapse { visibility: collapse; } ```