时间戳

首页 > 解决方案 > 具有动态高度的垂直可滚动 div

html - 具有动态高度的垂直可滚动 div

问题描述

以下是我的 HTML：

.wrapper {
  height: 90%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.non-scrollable-container {
  flex-shrink: 0;
  flex-grow: 0;
  max-width: 100%;
  width: 100%;
}

.scrollable-container {
  overflow-y: auto;
  overflow-x: hidden;
  width: 33.33%;
  display: inline-block;
}
<div class="wrapper">
  <div class="non-scrollable-container"></div>
  <div class="scrollable-container"></div>
  <div class="scrollable-container"></div>
  <div class="scrollable-container"></div>
</div>

现在，“non-scrollable-container” div 的高度是动态的，但不可滚动，并且它具有 100% 的宽度。

所有三个“可滚动容器” div 都应该被设置为内联并且可以单独滚动。我正在尝试将它们内联对齐，但无法做到。如何在 flexbox 中内联设置它们？

标签： htmlcssflexbox

解决方案

.wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.non-scrollable-container {
    display: flex;
    flex-direction: row;
    width:100%;
    background-color:#ccc;
    height:auto;
}

.scrollable-row {
    display: flex;
    flex-direction: row;
    width:100%;
    margin-top:10px;
}

.scrollable-container {
    display: flex;
    flex-direction: column;
    width:33.33%;
    background-color:#ccc;
    height:100px;
    overflow:auto;
    padding:5px;
}
<div class="wrapper">
  <div class="non-scrollable-container">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </div>
  <div class="scrollable-row">
    <div class="scrollable-container">
      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
    </div>
    <div class="scrollable-container">
      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
    </div>
    <div class="scrollable-container">
      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
    </div>
  </div>
</div>

试试这个代码。它适合你。如果您有任何问题，请告诉我。

推荐阅读