Bootstrap 5 accordion becomes too wide when expanded

Question

I was expecting the accordion component to expand to match the width of its parent element, but when it expands, it not only expands itself, but also the parent element, causing the left pane to compress a lot. What needs to be done to achieve the desired behavior? I'd appreciate any answers.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

<div id="container" class="d-flex flex-column align-items-stretch w-100 h-100">
      <div class="d-flex align-items-stretch h-100" style="min-height:0">
        <div id="left-pane" class="border border-secondary rounded-1 w-25 m-3 me-2 p-2 bg-light overflow-y-auto">
          <div class="list-group">
            <a href="" class="list-group-item active">An active item</a>
          </div>
        </div>
        <div id="right-pane" class="flex-grow-1 d-flex flex-column border border-secondary rounded-1 m-3 ms-2 p-2 bg-light overflow-y-auto">
          <ul class="nav nav-tabs h-auto" id="tabs" role="tablist">
            <li class="nav-item" role="presentation">
              <button 
                class="nav-link active" 
                id="tab1" 
                data-bs-toggle="tab" 
                data-bs-target="#tab1-pane" 
                type="button" 
                role="tab" 
                aria-controls="tab1-pane" 
                aria-selected="true">
                  System info
              </button>
            </li>
            <li class="nav-item" role="presentation">
              <button 
                class="nav-link" 
                id="tab2" 
                data-bs-toggle="tab" 
                data-bs-target="#tab2-pane" 
                type="button" 
                role="tab" 
                aria-controls="tab2-pane" 
                aria-selected="false">
                  Profile
              </button>
            </li>
          </ul>
          <div class="tab-content h-100 w-100 overflow-y-auto px-3 py-2 border-start border-bottom border-end rounded-bottom" id="tabs-content">
            <div 
              class="tab-pane fade show active" 
              id="tab1-pane" 
              role="tabpanel" 
              aria-labelledby="tab1" 
              tabindex="0">
                <div class="accordion" id="accordionPanelsStayOpenExample">
                  <div class="accordion-item">
                    <h2 class="accordion-header">
                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false" aria-controls="panelsStayOpen-collapseOne">
                        Accordion Item #1
                      </button>
                    </h2>
                    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse">
                      <div class="accordion-body w-auto h-auto">
                        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                      </div>
                    </div>
                  </div>
                </div>
            </div>
            <div 
              class="tab-pane fade" 
              id="tab2-pane" 
              role="tabpanel" 
              aria-labelledby="tab2" 
              tabindex="0">
                tab2 content
            </div>
          </div>
        </div>
      </div>
    </div>

I tried slightly adjusting the width of the accordion title and its content, but that didn't work.

Answer 1

The

#right-pane element does not explicitly declare flex-basis or width, so it will take up the required space. When the accordion is closed it works as you would expect since its content width is narrower (and then grows to fill the remaining space due to flex-grow: 1 in -1 class). However, when the accordion's content is displayed, the content will try to take up as much horizontal space as possible.

To avoid this, consider setting some kind of

flex-basis or width on the #right-pane element, such as width: 25% viaw-25`here:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

<div id="container" class="d-flex flex-column align-items-stretch w-100 h-100">
      <div class="d-flex align-items-stretch h-100" style="min-height:0">
        <div id="left-pane" class="border border-secondary rounded-1 w-25 m-3 me-2 p-2 bg-light overflow-y-auto">
          <div class="list-group">
            <a href="" class="list-group-item active">An active item</a>
          </div>
        </div>
        <div id="right-pane" class="flex-grow-1 d-flex flex-column border border-secondary rounded-1 m-3 ms-2 p-2 bg-light overflow-y-auto w-25">
          <ul class="nav nav-tabs h-auto" id="tabs" role="tablist">
            <li class="nav-item" role="presentation">
              <button 
                class="nav-link active" 
                id="tab1" 
                data-bs-toggle="tab" 
                data-bs-target="#tab1-pane" 
                type="button" 
                role="tab" 
                aria-controls="tab1-pane" 
                aria-selected="true">
                  System info
              </button>
            </li>
            <li class="nav-item" role="presentation">
              <button 
                class="nav-link" 
                id="tab2" 
                data-bs-toggle="tab" 
                data-bs-target="#tab2-pane" 
                type="button" 
                role="tab" 
                aria-controls="tab2-pane" 
                aria-selected="false">
                  Profile
              </button>
            </li>
          </ul>
          <div class="tab-content h-100 w-100 overflow-y-auto px-3 py-2 border-start border-bottom border-end rounded-bottom" id="tabs-content">
            <div 
              class="tab-pane fade show active" 
              id="tab1-pane" 
              role="tabpanel" 
              aria-labelledby="tab1" 
              tabindex="0">
                <div class="accordion" id="accordionPanelsStayOpenExample">
                  <div class="accordion-item">
                    <h2 class="accordion-header">
                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false" aria-controls="panelsStayOpen-collapseOne">
                        Accordion Item #1
                      </button>
                    </h2>
                    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse">
                      <div class="accordion-body w-auto h-auto">
                        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                      </div>
                    </div>
                  </div>
                </div>
            </div>
            <div 
              class="tab-pane fade" 
              id="tab2-pane" 
              role="tabpanel" 
              aria-labelledby="tab2" 
              tabindex="0">
                tab2 content
            </div>
          </div>
        </div>
      </div>
    </div>