Question

我试图建立一个随屏幕宽度变化的反应性网站。在宽屏幕上，scoreDiv具有水平和垂直滚动。但是，在较小宽度的屏幕上，我希望scoreDiv只能在垂直方向上进行水平滚动和弯曲（我不确定我是否使用了正确的术语，我希望这是有意义的）。当我尝试使用overflow-x：scroll时，由于某种原因它也会在y方向上滚动。任何帮助表示赞赏！

CSS＆amp; HTML

＆＃13;

#secondRow {
  position: relative;
  width: 100%;
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
}

#controlSidebar {
    text-align: center;

    border-right: 3px solid teal;
    background-color: white;
    background-size: cover;
    width: 375px;
}

#scoreDiv {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  overflow: auto;
  padding-right: 1em;
}
@media only screen and (max-width: 600px) {
  #secondRow {
    flex-direction: column;
  }

  #controlSidebar {
    text-align: center;

    width: auto;
    border-right: 0;
    border-bottom: 3px solid teal;
    background-color: white;
    background-size: cover;
    padding-bottom: 2em;
  }

  #scoreDiv {
    overflow-x: scroll;
    padding: 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
  }
}

＆＃13;

<div id="secondRow">
  <div id="controlSidebar">
    <!--content-->
  </div>
  <div id="scoreDiv">
    <!--content-->
  </div>
</div>

＆＃13;

修改我应该提到的是，我有一个侧边栏在左边的宽屏幕上，并保持在顶部的窄屏幕。我已更新代码以反映这一点。我还画了一个picture来展示我想要完成的事情。 This是我现在遇到的问题。

Answer 1

您需要删除溢出并为scoreDiv添加无包装。 Aldo将溢出添加到secondRow

#secondRow {
    border: 1px solid #ccc;
    overflow: auto;
    position: relative;
    width: 100%;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    float: left;
    width: calc(100% - 380px);
}
#controlSidebar {
    text-align: center;
    border-right: 3px solid teal;
    background-color: white;
    background-size: cover;
    float: left;
    width: 375px;
}
#scoreDiv {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    padding-right: 1em;
    white-space: nowrap;
}

#controlSidebar需要移到#secondRow之外，因为#secondRow充当可滚动内容的容器。我添加了以下用于测试的HTML

<div id="controlSidebar">
    <!--content-->
    menu
</div>
<div id="secondRow">

    <div id="scoreDiv">
        <!--content-->
        content content 1 content 2 content 3 content 4 content 5 content 6 content 7 content 8 content 9 content 10 content 11 content 12 content 13 content 14 content 15 content 16 content 17 content 18 content 19 content 20 content 21
    </div>
</div>

Answer 2

您可以在没有float的情况下进行操作。在右列中使用min-width: 0;。示例：https://codepen.io/schden/pen/jpvVpp

CSS只有水平滚动，flex垂直

2 个答案: