0

У меня есть контейнер строго заданных размеров.
Внутри него находится аккордеон из bootstrap.
Мне нужно сделать так, чтобы размеры аккордеона автоматически адаптировались под размеры контейнера и, если его размера не хватает, у card-body появлялся скролл благодаря overflow: auto.
Вот так это должно выглядеть:

введите сюда описание изображения Вот код: https://codepen.io/istamovvv/pen/zYZzGzv

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.my-container {
  width: 900px;
  height: 400px;
  background-color: gray;
}

.inner-container {
  margin: 20px;
  width: 300px;
  height: 300px;
}

.card-body {
  overflow: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="wrapper">
    <div class="my-container">
        <div class="inner-container">
            <div id="accordion">
                <div class="card">
                    <div class="card-header" id="headingOne">
                        <h5 class="mb-0">
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Collapsible Group Item #1
                            </button>
                        </h5>
                    </div>

                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                        <div class="card-body">
                            <ul>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                          </ul>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingTwo">
                        <h5 class="mb-0">
                            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                Collapsible Group Item #2
                            </button>
                        </h5>
                    </div>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                        <div class="card-body">
                          <ul>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                          </ul>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingThree">
                        <h5 class="mb-0">
                            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                Collapsible Group Item #3
                            </button>
                        </h5>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                        <div class="card-body">
                            <ul>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                            <li>Some element</li>
                          </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</body>

Не могу понять, к какому элементу и какие свойства нужно применить, чтобы этот аккордеон изменялся строго относительно родительского контейнера, а не вылезал за его пределы, будто этого контейнера и нет. Заранее крайне благодарен.

7
  • не понятно - надо чтобы меню помещалось в контейнер? Или чтобы скрывалось внутри? Можно добавить .my-container { overflow: auto; } или overflow: hidden; 25 мая 2021 в 11:04
  • При overflow: auto появляется скролл у самого контейнера. При overflow: hidden поведение такое, как нужно, однако card-body просто обрывается и у него не появляется скролл.
    – Borod
    25 мая 2021 в 11:14
  • 1
    так и добьвте скролл на .inner-container 25 мая 2021 в 11:18
  • Практически то, что нужно. Я добавил скрин, как это должно выглядеть в точности
    – Borod
    25 мая 2021 в 11:35
  • 1
    хы, так в таком случае вам просто надо было на card-body ограничить высоту max-height: 150px; к примеру 25 мая 2021 в 11:37

1 ответ 1

2
    .inner-container {
      margin: 20px;
      width: 300px;
      height: 300px;
      overflow: auto;  
      -ms-overflow-style: none; 
       scrollbar-width: none; 
    }
    
    .inner-container::-webkit-scrollbar {
      width: 0;
      background-color: #f9f9fd;
    }

  .card-body {
     max-height: 150px;
     overflow: auto;
    }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.