diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 90924cc05..e7d1bbb04 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -14,6 +14,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug where toggling `open` on `sl-drawer` would skip the transition
 - Fixed a bug where `sl-color-picker` could be opened when disabled
 - Fixed a bug in `sl-color-picker` that caused erratic slider behaviors [#388](https://github.com/shoelace-style/shoelace/issues/388) [#389](https://github.com/shoelace-style/shoelace/issues/389)
+- Fixed a bug where `sl-details` wouldn't always render the correct height when open initially [#357](https://github.com/shoelace-style/shoelace/issues/357)
 - Renamed `components.json` to `metadata.json`
 - Updated to the prerelease versions of LitElement and lit-html
 - Updated to Bootstrap Icons 1.4.1
diff --git a/src/components/details/details.ts b/src/components/details/details.ts
index 3292ab7e6..8f65a90c5 100644
--- a/src/components/details/details.ts
+++ b/src/components/details/details.ts
@@ -54,15 +54,16 @@ export default class SlDetails extends LitElement {
   /** Emitted after the details closes and all transitions are complete. */
   @event('after-hide') slAfterHide: EventEmitter<void>;
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.isVisible = this.open;
+  }
+
   firstUpdated() {
     focusVisible.observe(this.details);
 
     this.body.hidden = !this.open;
-
-    // Show on init if open
-    if (this.open) {
-      this.show();
-    }
+    this.body.style.height = this.open ? 'auto' : '0';
   }
 
   disconnectedCallback() {