父級橫向滾動，子級縱向滾動

我在容器內有一個 div 容器和另一個 div。我想在父級（容器 div）上添加水平滾動，在子級上添加垂直滾動以查看這些 div 中的文本。有什么幫助嗎？

有一個 stackblitz 來顯示我的問題。 https://stackblitz.com/edit/angular-ivy-t98oj8

.container {
  width: 300px;
  height: 200px;
  border: 2px solid;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  flex-direction: row;
}

.one {
  width: 100%;
  height: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  border: 2px red solid;
}

.text {
  width: 400px;
}

<div class="container">
  <div class="one">
    <div class="text">
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here.
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

你只需要修改類.one：

  /* ADDED */
  min-width: 400px;
  max-width: 400px;
  height:100%;

您在文本中設定的寬度應該在父級中設定。并且您需要將高度設定為 100%（而不是 300px），否則您將永遠看到滾動塊的結尾。

.container {
  width: 300px;
  height: 200px;
  border: 2px solid;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  flex-direction: row;
}

.one {
  width:100%;
  height: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  border: 2px red solid;
  /* ADDED */
  min-width: 400px;
  max-width: 400px;
  height:100%;
}

.text {
  width: 400px;
}

<div class="container">
  <div class="one">
    <div class="text">
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here.
            Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here.
            Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here.
            Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here.
            Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here.
            Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here.
      
    </div>
  </div>
</div>

標籤：html css 有角的

上一篇：Angular呼叫函式來捕獲div并在繼續之前等待捕獲

下一篇：AngularNgbar聊天工具提示值不能設定為小數點