Question

在此示例中，有一个外部容器是flexbox，其中一个子容器（底部容器）也是一个flexbox。我的目标是顶部根据其内容增长，底部填充其余部分。左下部分根据其内容生长，右下部分填充底部的其余部分。此外，右下角部分有更多内容可供使用，因此它应该有一个仅滚动右下角部分的滚动条。该示例在Chrome 66和Safari 11.1中按预期工作，但在Firefox 59和Edge中没有。在这种情况下，底部会超出视口。我该如何解决这个问题？

https://jsfiddle.net/6y2mm6hv/

body
	{
		margin: 0;
		padding: 0;
		height: 100vh;
		overflow: hidden;
	}  
  
  .container
  {
	display: flex;
	flex-direction: column;
	height: 100%;
  }
  
  .top
  {
	padding: 10px;
	flex: 0 0 auto;
	background-color: royalblue;
	border: 2px solid yellow;
  }
  
  .bottom
  {
	flex: 1 1 auto;
	background-color: whitesmoke;
	border: 2px solid red;
	padding: 10px;
	display: flex;
  }
  
  .left
  {
    width: 600px;
	flex: 0 0 auto;
  }
  
  .right
  {
	flex: 1 1 auto;
	overflow-y: scroll;
  }
  
  .bottom .line
  {
	font-size: 20px;
	padding: 10px;
  }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>undefined</title>
</head>
<body>
	<div class="container">
		<div class="top">
			<input/><button>Button</button><span>Some text</span>
		</div>
		<div class="bottom">
			<div class="left">
				<span>Left</span>
			</div>
			<div class="right">
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
				<div class="line">Line</div>
			</div>
		</div>
	</div>
</body>
</html>

Answer 1

为其提供供应商特定的样式..

display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	        flex-direction: column;
	height: 100%;

这个flexbox在Firefox和Edge中行为不端

1 个答案: