From 3a69b74048ff2480c481ace3e689fbb4d510f3e5 Mon Sep 17 00:00:00 2001
From: volfmaty <volfmatyas1@gmail.com>
Date: Sat, 24 Jan 2026 16:43:05 +0100
Subject: [PATCH] Fix `display` toggle in playground not changing value
 (#42437)

* Fix display toggle in playground not changing value

The [`display: flow-root` playground](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Display/Multi-keyword_syntax#display_block_flow-root_and_display_inline_flow-root) has a `<select>` toggle, which is supposed to change the `display` value of some elements to demonstrate the effects of the `flow-root` value.

Currently, its value is read only once when the playground JS first executed, which results in `display: block` always getting set on the elements. This change makes it so that the value is read after each change of the value, resulting in correct setting of the `display` value.

* add live sample id to flow-root example to remove unrelated code

---------

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
---
 .../css/guides/display/multi-keyword_syntax/index.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/files/en-us/web/css/guides/display/multi-keyword_syntax/index.md b/files/en-us/web/css/guides/display/multi-keyword_syntax/index.md
index e0570cbe9c1d14d..81632d98012f0ce 100644
--- a/files/en-us/web/css/guides/display/multi-keyword_syntax/index.md
+++ b/files/en-us/web/css/guides/display/multi-keyword_syntax/index.md
@@ -157,7 +157,7 @@ Change the selected option in the `<select>` element to see the effect of differ
 You can use any value with `flow-root` to create a new formatting context for the parent, making the child element margin relative to its parent's outer edge and avoiding the margin collapse.
 Changing between `display: flow-root` and `display: block flow-root` will achieve the same effect as the single-value `flow-root` keyword.
 
-```js hidden
+```js hidden live-sample___flow-root
 const parentDiv = document.getElementById("parent");
 const siblingDiv = document.getElementById("sibling");
 const displayTypeSelect = document.getElementById("displayType");
@@ -170,7 +170,7 @@ function changeDisplayType() {
 displayTypeSelect.addEventListener("change", changeDisplayType);
 ```
 
-```css hidden
+```css hidden live-sample___flow-root
 #controls {
   padding: 1rem;
   outline: 2px dashed black;
@@ -181,7 +181,7 @@ body {
 }
 ```
 
-```css
+```css live-sample___flow-root
 div,
 p {
   outline: 2px solid black;
@@ -205,7 +205,7 @@ p {
 }
 ```
 
-```html hidden
+```html hidden live-sample___flow-root
 <div id="controls">
   <label for="displayType">display:</label>
   <select id="displayType">
@@ -218,14 +218,14 @@ p {
 </div>
 ```
 
-```html
+```html live-sample___flow-root
 <div id="parent">
   <p id="child">The #child paragraph (nested in #parent).</p>
 </div>
 <p id="sibling">The #sibling paragraph (sibling of #parent).</p>
 ```
 
-{{EmbedLiveSample("display_block_flow-root_and_display_inline_flow-root", '90%', 380)}}
+{{EmbedLiveSample("flow-root", '90%', 380)}}
 
 The `flow-root` value makes sense if you think about block and inline layout, which is sometimes called [normal flow](/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction#normal_layout_flow). Our HTML page creates a new formatting context (floats and margins cannot extend out from the boundaries) and our content lays out in normal flow, using block and inline layout, unless we change the value of `display` to use some other formatting context. Creating a grid or flex container also creates a new formatting context (a grid or flex formatting context, respectively.) These also contain everything inside them. However, if you want to contain floats and margins but continue using block and inline layout, you can create a new flow root, and start over with block and inline layout. From that point downwards everything is contained inside the new flow root.