Update Sidebars example to fix dividers and rendering on Chrome (#33859)

mdo · web-flow · commit d80cb2241dbe · 2021-05-12T21:34:34.000-07:00
diff --git a/site/content/docs/5.0/examples/sidebars/index.html b/site/content/docs/5.0/examples/sidebars/index.html
@@ -70,7 +70,7 @@
 <main>
   <h1 class="visually-hidden">Sidebars examples</h1>
 
-  <div class="d-flex flex-column p-3 text-white bg-dark" style="width: 280px;">
+  <div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 280px;">
     <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
       <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
       <span class="fs-4">Sidebar</span>
@@ -126,7 +126,7 @@ <h1 class="visually-hidden">Sidebars examples</h1>
 
   <div class="b-example-divider"></div>
 
-  <div class="d-flex flex-column p-3 bg-light" style="width: 280px;">
+  <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 280px;">
     <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
       <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
       <span class="fs-4">Sidebar</span>
@@ -182,7 +182,7 @@ <h1 class="visually-hidden">Sidebars examples</h1>
 
   <div class="b-example-divider"></div>
 
-  <div class="d-flex flex-column bg-light" style="width: 4.5rem;">
+  <div class="d-flex flex-column flex-shrink-0 bg-light" style="width: 4.5rem;">
     <a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
       <svg class="bi" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
       <span class="visually-hidden">Icon-only</span>
@@ -230,7 +230,7 @@ <h1 class="visually-hidden">Sidebars examples</h1>
 
   <div class="b-example-divider"></div>
 
-  <div class="p-3 bg-white" style="width: 280px;">
+  <div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
     <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
       <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
       <span class="fs-5 fw-semibold">Collapsible</span>
@@ -293,7 +293,7 @@ <h1 class="visually-hidden">Sidebars examples</h1>
 
   <div class="b-example-divider"></div>
 
-  <div class="d-flex flex-column align-items-stretch bg-white" style="width: 380px;">
+  <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white" style="width: 380px;">
     <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
       <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
       <span class="fs-5 fw-semibold">List group</span>
diff --git a/site/content/docs/5.0/examples/sidebars/sidebars.css b/site/content/docs/5.0/examples/sidebars/sidebars.css
@@ -1,19 +1,26 @@
+body {
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+}
+
+html {
+  height: -webkit-fill-available;
+}
+
 main {
   display: flex;
   flex-wrap: nowrap;
   height: 100vh;
   height: -webkit-fill-available;
+  max-height: 100vh;
   overflow-x: auto;
   overflow-y: hidden;
 }
-main > * {
-  flex-shrink: 0;
-  min-height: -webkit-fill-available;
-}
 
 .b-example-divider {
+  flex-shrink: 0;
   width: 1.5rem;
-  height: 100%;
+  height: 100vh;
   background-color: rgba(0, 0, 0, .1);
   border: solid rgba(0, 0, 0, .15);
   border-width: 1px 0;
