diff --git a/openstack_dashboard/dashboards/admin/metadata_defs/templates/metadata_defs/_detail_contents.html b/openstack_dashboard/dashboards/admin/metadata_defs/templates/metadata_defs/_detail_contents.html
index 5c328bfa5f..2a4da61369 100644
--- a/openstack_dashboard/dashboards/admin/metadata_defs/templates/metadata_defs/_detail_contents.html
+++ b/openstack_dashboard/dashboards/admin/metadata_defs/templates/metadata_defs/_detail_contents.html
@@ -1,5 +1,6 @@
 {% load i18n %}
 
-<pre class="data">
-  {{ namespace_contents }}
-</pre>
+<div class="pre_scrollable">
+  <pre class="data">{{ namespace_contents }}</pre>
+</div>
+
diff --git a/openstack_dashboard/static/dashboard/scss/_util.scss b/openstack_dashboard/static/dashboard/scss/_util.scss
index cf1fc4fa5c..a2a44b31ec 100644
--- a/openstack_dashboard/static/dashboard/scss/_util.scss
+++ b/openstack_dashboard/static/dashboard/scss/_util.scss
@@ -4,4 +4,15 @@
 .horizontal-center {
   float: none;
   margin: 0 auto;
-}
\ No newline at end of file
+}
+
+// Used to x-scroll to Pre-formatted text.
+.pre_scrollable {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+
+  pre {
+    word-wrap: normal;
+  }
+}