Bootstrap 5 Offcanvas Not Resizing Properly with Nested Elements
I've looked through the documentation and I'm still confused about I've looked through the documentation and I'm still confused about I'm facing an issue with the Bootstrap 5 Offcanvas component where the Offcanvas does not resize correctly when it contains nested elements such as forms and lists... I've correctly set up the Offcanvas component according to the Bootstrap documentation, but when the content inside it exceeds the viewport height, the Offcanvas does not scroll as expected. Instead, it expands beyond the viewport and clips the content. Here's the relevant HTML structure I'm using: ```html <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"> <div class="offcanvas-header"> <h5 id="offcanvasExampleLabel">Offcanvas with Nested Content</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <form> <div class="mb-3"> <label for="inputText" class="form-label">Input Text</label> <input type="text" class="form-control" id="inputText"> </div> <ul class="list-group"> <!-- Assume there are many list items here --> <li class="list-group-item">Item 1</li> <li class="list-group-item">Item 2</li> <li class="list-group-item">Item 3</li> <li class="list-group-item">Item 4</li> <li class="list-group-item">Item 5</li> <!-- More items --> </ul> </form> </div> </div> ``` I've tried applying custom CSS to limit the height of the Offcanvas body and enable scrolling: ```css .offcanvas-body { max-height: 85vh; overflow-y: auto; } ``` However, this doesn't seem to have any effect. The Offcanvas still expands to fit the content instead of scrolling. I'm using Bootstrap 5.1.3, and I've verified that the necessary JavaScript is included. Is there a specific configuration or CSS adjustment that I might be missing? Any guidance would be greatly appreciated! For context: I'm using Html/Css on macOS. Is there a better approach? For reference, this is a production desktop app. I'm open to any suggestions. I've been using Html/Css for about a year now.