diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index 6bcc296bf5e..2a8fed8596f 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 00a50e9339e..e91c9c6b1c0 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);