Html flexbox布局和嵌套滚动条存在问题

嵌入式滚动条在简单的flexbox容器中不起作用。浏览器会自动显示水平滚动条

在这个简单的例子中，我做错了什么

当我在

flexContainer

上删除

“display:flex；”

时，嵌入的滚动条工作。当然，我的整个布局都被破坏了

我只发现了以下内容，但解决方案与垂直滚动条有关，在这里不起作用：

.flexContainer{
显示器：flex；
}
.侧边栏{
弹性：10自动；
最小宽度：150px；
最大宽度：190px；
颜色：白色；
背景：蓝色；
}
.内容{
弹性：10自动；
背景：绿色；
}
.scrollableElement{
显示器：flex；
溢出-x：滚动；
}
.textElement{
颜色：白色；
背景：灰色；
}

边栏
内容11111111111111111111111111111111111111111111111111111111111111111111111111111
内容222222222222222222222222222222222222222
内容33333333333333333333333333333333333333333333333333333333333333333333333333333333333333
内容44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444
内容55555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555
内容66666666666666666666666666666666666666666666666666666666666666666666666666666
内容7777777777777777777777777777777777777777777777777777777777777777777777777
内容88888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888

您的

flex

容器没有设置宽度，因此它占用了整个屏幕的宽度

您可以尝试设置宽度以实现所需的行为，例如：

.flexContainer {
  display: flex;
  width: 500px;
}

或者您可以根据屏幕设置

.scrollableElement

的宽度以调整大小：

.scrollableElement {
  overflow-x: scroll;
  width: 65%;
}

---

您的

flex

容器没有设置宽度，因此它占用了整个屏幕的宽度

您可以尝试设置宽度以实现所需的行为，例如：

.flexContainer {
  display: flex;
  width: 500px;
}

或者您可以根据屏幕设置

.scrollableElement

的宽度以调整大小：

.scrollableElement {
  overflow-x: scroll;
  width: 65%;
}

---

您需要允许

.content

收缩，然后添加

最小宽度：0

或

溢出：隐藏

，以便在其父屏幕内计算其大小，以便溢出作用于子屏幕：

.content {
  flex: 1 1 auto;/* updated*/
  background: green;
  min-width:0;/* added */
}

.flexContainer{
显示器：flex；
}
.侧边栏{
弹性：10自动；
最小宽度：150px；
最大宽度：190px；
颜色：白色；
背景：蓝色；
}
.内容{
flex:1自动；
背景：绿色；
最小宽度：0；
}
.scrollableElement{
显示器：flex；
溢出-x：滚动；
}
.textElement{
颜色：白色；
背景：灰色；
}

边栏
内容11111111111111111111111111111111111111111111111111111111111111111111111111111
内容222222222222222222222222222222222222222
内容33333333333333333333333333333333333333333333333333333333333333333333333333333333333333
内容44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444
内容55555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555
内容66666666666666666666666666666666666666666666666666666666666666666666666666666
内容7777777777777777777777777777777777777777777777777777777777777777777777777
内容88888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888

您需要允许

.content

收缩，然后添加

最小宽度：0

或

溢出：隐藏

，以便在其父屏幕内计算其大小，以便溢出作用于子屏幕：

.content {
  flex: 1 1 auto;/* updated*/
  background: green;
  min-width:0;/* added */
}

.flexContainer{
显示器：flex；
}
.侧边栏{
弹性：10自动；
最小宽度：150px；
最大宽度：190px；
颜色：白色；
背景：蓝色；
}
.内容{
flex:1自动；
背景：绿色；
最小宽度：0；
}
.scrollableElement{
显示器：flex；
溢出-x：滚动；
}
.textElement{
颜色：白色；
背景：灰色；
}

边栏
内容11111111111111111111111111111111111111111111111111111111111111111111111111111
内容222222222222222222222222222222222222222
内容33333333333333333333333333333333333333333333333333333333333333333333333333333333333333
内容44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444
内容55555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555
内容66666666666666666666666666666666666666666666666666666666666666666666666666666
内容7777777777777777777777777777777777777777777777777777777777777777777777777
内容88888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888

您可以根据水平布局调整垂直解决方案。Overflow-y不适用于水平布局，但有一个等效的水平属性。感谢您的快速响应。flexContainer上的“overflow-x:auto”将不再显示浏览器滚动条，而是显示flexContainer的滚动条。但实际上，应该使用scrollableElement滚动条。您可以将垂直解决方案调整为水平布局。Overflow-y不适用于水平布局，但有一个等效的水平属性。感谢您的快速响应。flexContainer上的“overflow-x:auto”将不再显示浏览器滚动条，而是显示flexContainer的滚动条。但实际上，scrollableElement scrollbar应该使用.thxs作为答案。flexContainer不应该有固定的宽度，这样布局才有响应性