diff --git a/layout/base/nsCSSFrameConstructor.cpp b/layout/base/nsCSSFrameConstructor.cpp
index 9eb8dce028a1..a619630eca41 100644
--- a/layout/base/nsCSSFrameConstructor.cpp
+++ b/layout/base/nsCSSFrameConstructor.cpp
@@ -3239,18 +3239,17 @@ nsIFrame* nsCSSFrameConstructor::ConstructFieldSetFrame(
   return fieldsetFrame;
 }
 
-nsIFrame* nsCSSFrameConstructor::ConstructDetails(
-    nsFrameConstructorState& aState, FrameConstructionItem& aItem,
-    nsContainerFrame* aParentFrame, const nsStyleDisplay* aStyleDisplay,
-    nsFrameList& aFrameList) {
-  if (!aStyleDisplay->IsScrollableOverflow()) {
-    return ConstructNonScrollableBlock(aState, aItem, aParentFrame,
-                                       aStyleDisplay, aFrameList);
+const nsCSSFrameConstructor::FrameConstructionData*
+nsCSSFrameConstructor::FindDetailsData(const Element& aElement,
+                                       ComputedStyle& aStyle) {
+  if (!StaticPrefs::layout_details_force_block_layout()) {
+    return nullptr;
   }
-
-  // Build a scroll frame if necessary.
-  return ConstructScrollableBlock(aState, aItem, aParentFrame, aStyleDisplay,
-                                  aFrameList);
+  static constexpr FrameConstructionData sBlockData[2] = {
+      {&nsCSSFrameConstructor::ConstructNonScrollableBlock},
+      {&nsCSSFrameConstructor::ConstructScrollableBlock},
+  };
+  return &sBlockData[aStyle.StyleDisplay()->IsScrollableOverflow()];
 }
 
 nsIFrame* nsCSSFrameConstructor::ConstructBlockRubyFrame(
@@ -3496,7 +3495,8 @@ nsCSSFrameConstructor::FindHTMLData(const Element& aElement,
       SIMPLE_TAG_CREATE(audio, NS_NewHTMLVideoFrame),
       SIMPLE_TAG_CREATE(progress, NS_NewProgressFrame),
       SIMPLE_TAG_CREATE(meter, NS_NewMeterFrame),
-      COMPLEX_TAG_CREATE(details, &nsCSSFrameConstructor::ConstructDetails)};
+      SIMPLE_TAG_CHAIN(details, nsCSSFrameConstructor::FindDetailsData),
+  };
 
   return FindDataByTag(aElement, aStyle, sHTMLData, ArrayLength(sHTMLData));
 }
diff --git a/layout/base/nsCSSFrameConstructor.h b/layout/base/nsCSSFrameConstructor.h
index d96fbb27a89d..faaec1c54415 100644
--- a/layout/base/nsCSSFrameConstructor.h
+++ b/layout/base/nsCSSFrameConstructor.h
@@ -1377,13 +1377,6 @@ class nsCSSFrameConstructor final : public nsFrameManager {
                                    const nsStyleDisplay* aStyleDisplay,
                                    nsFrameList& aFrameList);
 
-  // <details> always creates a block per spec.
-  nsIFrame* ConstructDetails(nsFrameConstructorState& aState,
-                             FrameConstructionItem& aItem,
-                             nsContainerFrame* aParentFrame,
-                             const nsStyleDisplay* aStyleDisplay,
-                             nsFrameList& aFrameList);
-
   // Creates a block frame wrapping an anonymous ruby frame.
   nsIFrame* ConstructBlockRubyFrame(nsFrameConstructorState& aState,
                                     FrameConstructionItem& aItem,
@@ -1444,6 +1437,9 @@ class nsCSSFrameConstructor final : public nsFrameManager {
                                                      ComputedStyle&);
   static const FrameConstructionData* FindCanvasData(const Element&,
                                                      ComputedStyle&);
+  // <details> always creates a block per spec.
+  static const FrameConstructionData* FindDetailsData(const Element&,
+                                                      ComputedStyle&);
 
   /* Construct a frame from the given FrameConstructionItem.  This function
      will handle adding the frame to frame lists, processing children, setting
diff --git a/modules/libpref/init/StaticPrefList.yaml b/modules/libpref/init/StaticPrefList.yaml
index abf6fbc9b064..5e4ec9d16598 100644
--- a/modules/libpref/init/StaticPrefList.yaml
+++ b/modules/libpref/init/StaticPrefList.yaml
@@ -9249,6 +9249,12 @@
   value: true
   mirror: always
 
+# Whether <details> is forced to be a block, see bug 1856374
+- name: layout.details.force-block-layout
+  type: bool
+  value: true
+  mirror: always
+
 #---------------------------------------------------------------------------
 # Prefs starting with "mathml."
 #---------------------------------------------------------------------------
diff --git a/testing/web-platform/meta/html/rendering/the-details-element/details-display-type-001.tentative.html.ini b/testing/web-platform/meta/html/rendering/the-details-element/details-display-type-001.tentative.html.ini
index 931a0473a982..ff24f6fcdff0 100644
--- a/testing/web-platform/meta/html/rendering/the-details-element/details-display-type-001.tentative.html.ini
+++ b/testing/web-platform/meta/html/rendering/the-details-element/details-display-type-001.tentative.html.ini
@@ -1,2 +1,2 @@
 [details-display-type-001.tentative.html]
-  expected: FAIL
+  prefs: [layout.details.force-block-layout:false]
diff --git a/testing/web-platform/meta/html/rendering/the-details-element/details-display-type-002.tentative.html.ini b/testing/web-platform/meta/html/rendering/the-details-element/details-display-type-002.tentative.html.ini
new file mode 100644
index 000000000000..d55a32f7c997
--- /dev/null
+++ b/testing/web-platform/meta/html/rendering/the-details-element/details-display-type-002.tentative.html.ini
@@ -0,0 +1,2 @@
+[details-display-type-002.tentative.html]
+  prefs: [layout.details.force-block-layout:false]
diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-002-ref.html b/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-002-ref.html
new file mode 100644
index 000000000000..297634b521fa
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-002-ref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<style>
+  div {
+    margin-top: 3em;
+  }
+</style>
+<details open>
+  <summary>The summary.</summary>
+  <div>Some details.</div>
+</details>
diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-002.tentative.html b/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-002.tentative.html
new file mode 100644
index 000000000000..716221f7c5c6
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-002.tentative.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Details display property (flex)</title>
+<link rel="match" href="details-display-type-002-ref.html">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1856374">
+<link rel="help" href="https://github.com/dbaron/details-styling">
+<style>
+  details {
+    display: flex;
+    flex-direction: column;
+    gap: 3em;
+  }
+</style>
+<details open>
+  <summary>The summary.</summary>
+  Some details.
+</details>