Question

以下是我的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％的宽度。

所有三个“ scrollable-container” div都应内联设置，也可以单独滚动。我正在尝试将它们内联，但无法做到。如何在flexbox中内联设置它们？

Answer 1

.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>

尝试此代码。它适用于您。如果您有任何问题，请通知我。

具有动态高度的垂直滚动div

1 个答案: