diff --git a/src/components/atoms/OffcanvasBody/OffcanvasBody.css b/src/components/atoms/OffcanvasBody/OffcanvasBody.css
index ffbc50a6..a736cc5a 100644
--- a/src/components/atoms/OffcanvasBody/OffcanvasBody.css
+++ b/src/components/atoms/OffcanvasBody/OffcanvasBody.css
@@ -1,3 +1,7 @@
+:host(:not([data-expand])) {
+  overflow-y: auto;
+}
+
 .navbar-expand-xs.offcanvas-body {
   display: flex;
   flex-grow: 0;
diff --git a/src/components/atoms/OffcanvasBody/OffcanvasBody.css.map b/src/components/atoms/OffcanvasBody/OffcanvasBody.css.map
index b7eab7fb..383ac0de 100644
--- a/src/components/atoms/OffcanvasBody/OffcanvasBody.css.map
+++ b/src/components/atoms/OffcanvasBody/OffcanvasBody.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["OffcanvasBody.scss","../../../../node_modules/bootstrap/scss/mixins/_breakpoints.scss"],"names":[],"mappings":"AAMI;EACE;EACA;EACA;EACA;;;ACqDF;EDzDA;IACE;IACA;IACA;IACA;;;ACqDF;EDzDA;IACE;IACA;IACA;IACA;;;ACqDF;EDzDA;IACE;IACA;IACA;IACA;;;ACqDF;EDzDA;IACE;IACA;IACA;IACA;;;ACqDF;EDzDA;IACE;IACA;IACA;IACA","file":"OffcanvasBody.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["OffcanvasBody.scss","../../../../node_modules/bootstrap/scss/mixins/_breakpoints.scss"],"names":[],"mappings":"AAIA;EACE;;;AAKE;EACE;EACA;EACA;EACA;;;ACiDF;EDrDA;IACE;IACA;IACA;IACA;;;ACiDF;EDrDA;IACE;IACA;IACA;IACA;;;ACiDF;EDrDA;IACE;IACA;IACA;IACA;;;ACiDF;EDrDA;IACE;IACA;IACA;IACA;;;ACiDF;EDrDA;IACE;IACA;IACA;IACA","file":"OffcanvasBody.css"}
\ No newline at end of file
diff --git a/src/components/atoms/OffcanvasBody/OffcanvasBody.scss b/src/components/atoms/OffcanvasBody/OffcanvasBody.scss
index 1569348b..ee45aeb0 100644
--- a/src/components/atoms/OffcanvasBody/OffcanvasBody.scss
+++ b/src/components/atoms/OffcanvasBody/OffcanvasBody.scss
@@ -2,6 +2,10 @@
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/mixins/breakpoints';
 
+:host(:not([data-expand])) {
+  overflow-y: auto;
+}
+
 @each $breakpoint-name, $_ in $grid-breakpoints {
   @include media-breakpoint-up($breakpoint-name) {
     .navbar-expand-#{$breakpoint-name}.offcanvas-body {
diff --git a/src/stories/offcanvas.stories.js b/src/stories/offcanvas.stories.js
index 26f9b7bb..8243fa13 100644
--- a/src/stories/offcanvas.stories.js
+++ b/src/stories/offcanvas.stories.js
@@ -74,8 +74,51 @@ export const Basic = () => html`
     <cod-offcanvas-body>
       <p>
         Some text as placeholder. In real life you can have the elements you
-        have chosen. Like, text, images, lists, etc.
+        have chosen. Like, text, images, lists, etc. Here's an example of a very
+        long list.
       </p>
+      <ol>
+        <li>1</li>
+        <li>2</li>
+        <li>3</li>
+        <li>4</li>
+        <li>5</li>
+        <li>6</li>
+        <li>7</li>
+        <li>8</li>
+        <li>9</li>
+        <li>10</li>
+        <li>11</li>
+        <li>12</li>
+        <li>13</li>
+        <li>14</li>
+        <li>15</li>
+        <li>16</li>
+        <li>17</li>
+        <li>18</li>
+        <li>19</li>
+        <li>20</li>
+        <li>21</li>
+        <li>22</li>
+        <li>23</li>
+        <li>24</li>
+        <li>25</li>
+        <li>26</li>
+        <li>27</li>
+        <li>28</li>
+        <li>29</li>
+        <li>30</li>
+        <li>31</li>
+        <li>32</li>
+        <li>33</li>
+        <li>34</li>
+        <li>35</li>
+        <li>36</li>
+        <li>37</li>
+        <li>38</li>
+        <li>39</li>
+        <li>40</li>
+      </ol>
     </cod-offcanvas-body>
   </cod-offcanvas>
 `;