diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index 6bcc296bf5e577405a162df85ebb9ffd0f22be7d..2a8fed8596f31f93862f1f4b26190615c81305d8 100644
--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -43,6 +43,12 @@
 
 .claro-details {
   display: block;
+  /* The following width and min-width values ensure that the <details> element
+   * does not shift widths when opening, in the event that a parent element
+   * constrains the width. This can happen when toggling the "lazy-load" option
+   * within an image field. */
+  width: min-content;
+  min-width: 100%;
   margin-top: var(--space-m);
   margin-bottom: var(--space-m);
   color: var(--color-text);
diff --git a/core/themes/claro/css/components/details.pcss.css b/core/themes/claro/css/components/details.pcss.css
index 00a50e9339ebde6dee2d783059c0efacbdb8dd09..e91c9c6b1c09c4b304268147a79cad27c5623d67 100644
--- a/core/themes/claro/css/components/details.pcss.css
+++ b/core/themes/claro/css/components/details.pcss.css
@@ -36,6 +36,12 @@
 
 .claro-details {
   display: block;
+  /* The following width and min-width values ensure that the <details> element
+   * does not shift widths when opening, in the event that a parent element
+   * constrains the width. This can happen when toggling the "lazy-load" option
+   * within an image field. */
+  width: min-content;
+  min-width: 100%;
   margin-top: var(--space-m);
   margin-bottom: var(--space-m);
   color: var(--color-text);