具有可滚动内容的Flexbox项目 [英] Flexbox item with scrollable content

问题描述

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

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

>

添加 overflow：auto 至 .main 修复了滚动，谢谢。不过，我的例子有所简化。我还试图使用flexbox align-items 和 justify-content 来垂直和水平居中放置子项。当应用此元素时，主要元素变为不可解压缩。 编辑2

我在 margin：auto .com / questions / 33454533 / cant-scroll-to-top-of-flex-item-that-is-overflowing-container>无法滚动到溢出容器的弹性项目顶部以修复第二个问题。

  * {margin：0;} html，body {height ：100％;}。container {display：flex; height：100％;}。main {flex：1;身高：100％;背景：绿色;溢出：自动;显示：flex; align-items：center; justify-content：center;}。sidebar {flex：0 0 200px;背景：蓝色; height：100％;}。item {width：2000px; height：50px;背景：红色;}  

 < div class =container > < div class =main> < div class =item>当他的宽度为2000像素时，它应该在其父项内滚动。 < / DIV> < / DIV> < div class =sidebar> 200px宽边栏< / div>< / div>  

解决方案

您需要将 overflow：auto 应用于父项。此属性不是自动的

* {margin：0; body {height：100％;}。container {display：flex; height：100％;}。main {flex：1;身高：100％;背景：绿色; overflow：auto;}。sidebar {flex：0 0 200px;背景：蓝色; height：100％;}。item {width：2000px; height：50px;背景：红色;}

 < div class =container > < div class =main> < div class =item>这是2000px宽，并应该在其父母的内部滚动。相反，身体正在滚动。 < / DIV> < / DIV> < div class =sidebar> 200px宽边栏< / div>< / div>  

I have a simple flexbox layout with two items; one fluid width and the other fixed. When the fluid item contains children that are wider / taller than itself, this causes the page to scroll, rather than the fluid item itself.

I have tried solutions to a few similar questions but none seem to work for me. As someone who hasn't used flexbox very much, I feel like I'm missing something obvious...

EDIT:

Adding overflow:auto to .main fixes the scrolling, thanks. However my example was simplified somewhat; I am also attempting to center the child item both vertically and horizontally, using flexbox align-items and justify-content. When this is applied, the main element becomes unscrollable.

EDIT 2

I used the margin:auto trick on the child item as specified at Can't scroll to top of flex item that is overflowing container to fix the second issue.

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

解决方案

You need to apply overflow:auto to the parent. this property isn't automatic

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

这篇关于具有可滚动内容的Flexbox项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！