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; Commented 25 мая 2021 в 11:04
  • При overflow: auto появляется скролл у самого контейнера. При overflow: hidden поведение такое, как нужно, однако card-body просто обрывается и у него не появляется скролл.
    – Borod
    Commented 25 мая 2021 в 11:14
  • 1
    так и добьвте скролл на .inner-container Commented 25 мая 2021 в 11:18
  • Практически то, что нужно. Я добавил скрин, как это должно выглядеть в точности
    – Borod
    Commented 25 мая 2021 в 11:35
  • 1
    хы, так в таком случае вам просто надо было на card-body ограничить высоту max-height: 150px; к примеру Commented 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;
    }

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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