Html 如何处理滚动条包装？

我有一个

.sidebar

和一个

.content

div，包装在flexbox中。我想使内容滚动，同时保持边栏固定

约束

• 我不能使用Javascript
• 容器的最大宽度必须为600px

问题

如果相对定位，侧边栏和内容都会滚动：

如果我绝对定位它，滚动条会留下它美丽的右角来环绕600px容器：

---

如何使滚动条保持在屏幕的右边缘，而不是环绕固定宽度的div？

无需使用Flexbox，只需卸下包装并给侧边栏一个固定位置即可

此外，我使用了一个媒体查询来控制两个的左边缘

html，正文{
保证金：0；
}
* {
框大小：边框框；
}
.侧边栏，.内容{
边框：1px纯绿色；
}
.侧边栏{
位置：固定；
排名：0；
底部：0；
左：计算（50%-300px）；
宽度：200px；
}
.内容{
最大宽度：400px；
左边距：计算（50%-100px）；
}
.内容p{
字体大小：48px；
}
@介质（最大宽度：600px）{
.侧边栏{
左：0；
}
.内容{
左边距：200px；
}
}

家
关于
接触
猴子
鸽子


我们有全欧洲最好的猴子。


我们也有一些非常好的鸽子。


一只鸽子在2016年SAT考试中得分超过1500分。


老实说，猴子很嫉妒他。


但到目前为止他们还是好朋友。。。而且将是永远的

您需要什么解决方法。。。绝对位置解决它不，我想在屏幕边缘的滚动条，而不是在集装箱的边缘最大宽度为600px。。。由于您在内容上使用了

flex:1

，因此它将始终是600px，或者您希望以另一种方式使用它？我希望添加的边栏和内容最大为600px，但我看不出flexbox的需要。。。

.flex{
  position: relative;
  display: flex;
  flex-direction: row;
  max-width: 600px;
  margin: auto;
  border: 1px solid green;
}

.flex > *{
    border: 1px solid green;
}

.sidebar{
  width: 200px;
}

.content{
  flex: 1;
  overflow-y: auto;
}

.content p{
  font-size: 48px;
}

*{
  box-sizing: border-box;
}

.flex-wrapper{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  max-width: 600px;
  margin: auto;
}

.flex{
  display: flex;
  flex-direction: row;
  border: 1px solid green;
  height: 100%;
}

.flex > *{
    border: 1px solid green;
}

.sidebar{
  width: 200px;
}

.content{
  flex: 1;
  overflow-y: auto;
}

.content p{
  font-size: 48px;
}