具有可滚动内容的 Flexbox 项目

Question

我有一个包含两个项目的简单 flexbox 布局；一种流体宽度，另一种固定。当流体项目包含比自身宽/高的子项时，这会导致页面滚动，而不是流体项目本身。

我已经尝试了一些类似问题的解决方案，但似乎没有一个对我有用。作为一个没有经常使用 flexbox 的人，我觉得我错过了一些明显的东西......

编辑：

添加overflow:auto以.main修复滚动，谢谢。然而我的例子被简化了一些；我还尝试使用 flexboxalign-items和justify-content. 应用此选项后，main元素将不可滚动。

编辑 2

我margin:auto在无法滚动到容器溢出的 flex 项目顶部指定的子项目上使用了技巧来解决第二个问题。

* {
	margin: 0;
}

html, body {
	height: 100%;
}

.container {
	display: flex;
	height: 100%;
}

.main {
	flex: 1;
	height: 100%;
	background: green;
        overflow: auto;
  
        display: flex;
	align-items: center;
	justify-content: center;
}

.sidebar {
	flex: 0 0 200px;
	background: blue;
	height: 100%;
}

.item {
	width: 2000px;
	height: 50px;
	background: red;
}

<div class="container">
	<div class="main">
		<div class="item">
			When his is 2000px wide, it should scroll inside its parent.
		</div>
	</div>
	<div class="sidebar">
		200px wide sidebar
	</div>
</div>

Answer 1

您需要overflow:auto向家长提出申请。该属性不是自动的

* {
	margin: 0;
}

html, body {
	height: 100%;
}

.container {
	display: flex;
	height: 100%;
}

.main {
	flex: 1;
	height: 100%;
	background: green;
	overflow: auto;
}

.sidebar {
	flex: 0 0 200px;
	background: blue;
	height: 100%;
}

.item {
	width: 2000px;
	height: 50px;
	background: red;
}

<div class="container">
	<div class="main">
		<div class="item">
			This is 2000px wide, and should scroll inside its parent. Instead, the body is scrolling.
		</div>
	</div>
	<div class="sidebar">
		200px wide sidebar
	</div>
</div>