具有可滚动内容的Flexbox项目

Question

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

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

修改

将overflow:auto添加到.main修复了滚动操作，谢谢。但是我的例子有所简化;我还尝试使用flexbox align-items和justify-content垂直和水平居中子项目。应用此选项后，main元素将变为不可滚动。

编辑2

我在Can't scroll to top of flex item that is overflowing container指定的子项目上使用margin:auto技巧来解决第二个问题。

* {
	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应用于父级。此属性不是自动

＆＃13;

＆＃13;

* {
	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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;