bootstrap-4 - Y-滚动 flex 容器内的两个 flex 容器

问题描述

我有这个问题，我有 2 个 flex div，其中包含一个 flex div 内的卡片和 sidemenu。我希望当 2 个第一个 div 的高度增加时，可以在自己内部滚动，而不是增加其父级的高度，从而增加窗口的大小。我相信这将使我能够修复始终可见的 div。

.fixed-container {
  background-color: red;
  width: 100%;
  height: 30px;
}

.fixed-container-too {
  background-color: green;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-content: stretch;
}

.card-container {
  background-color: violet;
  display: flex;
  flex-flow: row wrap;
  overflow-y: auto;
  align-items: stretch;
}

.card {
    margin: 5px;
 }

.sidemenu-container {
  min-width: 150px;
  max-width: 150px;
  background-color: blue;
  overflow-y: auto;
  color: white;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>

<html>
  <div>
       <div class="fixed-container">
            Fixed container that should stay always in the same place
       </div>
       <div class="fixed-container-too">
           <div class="card-container">
               <div class="card" style="width: 18rem;">
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Example Text</p>
                 </div>
               </div>
               <div class="card" style="width: 18rem;">
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Example Text</p>
                 </div>
               </div>
               <div class="card" style="width: 18rem;">
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Example Text</p>
                 </div>
               </div>
               <div class="card" style="width: 18rem;">
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Example Text</p>
                 </div>
               </div>
               <div class="card" style="width: 18rem;">
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Example Text</p>
                 </div>
               </div>
               <div class="card" style="width: 18rem;">
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Example Text</p>
                 </div>
               </div>
               <div class="card" style="width: 18rem;">
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Example Text</p>
                 </div>
               </div>
               <div class="card" style="width: 18rem;">
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Example Text</p>
                 </div>
               </div>
           </div>
           <div class="sidemenu-container">
              Some content in this sidemenu that needs to scroll too
           </div>
       </div>
  </div>
</html>

标签： bootstrap-4scrollflexbox

bootstrap-4 - Y-滚动 flex 容器内的两个 flex 容器

问题描述

解决方案

推荐阅读