Question

我正在尝试创建一个基于flex框的html布局，如下所示（请参见图片）。视口具有3行（弹性方向：列）
  -顶部-“主标题”
  -中间-“家”
  -底部-“主页脚”

然后在“主页”的左侧有一个“菜单”，在右侧有一个“容器”。

“容器”具有
        -顶部的“容器标头”
        -中间的“盒子容器”
        -博顿“容器脚注”

中间的“盒子容器”需要滚动。

我可以正确地获得布局。请参阅codepen。

这是代码段。

html, body {
	height: 100%;
	overflow: hidden;
	margin: 0;
  }
  
  .window {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
  }
  
  .header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
  }
  
  .footer {
	display: flex;
	flex-direction: row;
	justify-content: center;
	background-color: cyan;
  }
  
  .home {
	display: flex;
	flex-direction: row;
	flex: 1;
	min-height: 0;
  }
  
  .menu {
	width: 200px;
	border: 1px solid green;
	flex-shrink: 0;
  }
  .container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: auto;
	flex: 1;
	border: 1px solid blue;
  }
  .container-header {
	  width: 100%;
	  text-align: center;
	background-color: purple;
  }
  .container-footer {
	text-align: center;
	background-color: mediumslateblue;
  }
  .box-container {
	display: flex;
	justify-content: space-between;
	overflow: auto;
	border: 1px green solid;
  }
  .box {
	width: 600px;
	height: 600px;
	margin: 10px;
	background-color: red;
	text-align: center;
	padding: 5px;
	flex-shrink: 0;
  }

<html>
	<head>
		<link rel="stylesheet" href="./style.css">
	</head>
	<body>
		<div class="window">
			<div class="header">
				<div>Left</div>
				<div>Right</div>
			</div>
			<div class="home">
				<div class="menu">
					menu
				</div>
				<div class="container">
					<div class="container-header">
						Container Header
					</div>
					<div class="box-container">
						<div class="box">
						box - 1
						</div>
						<div class="box">
						box - 2
						</div>
						<div class="box">
						box - 3
						</div>
					</div>
					<div class="container-footer">
						Container Footer
					</div>
				</div> 
			</div>
			<div class="footer">
				<div>Left</div>
				<div>Right</div>
			</div>
		</div>
	</body>
<html>

但是有些事情，我无法理解。

要使“盒子容器”可滚动，我认为将“盒子容器”的溢出设置为自动即可。
但是看来，仅靠这一点是行不通的。我必须将“容器”的溢出也设置为自动，以使“盒子容器”可滚动。
实际上，对于“容器”和“盒子容器”，都需要将溢出设置为自动。

为什么会这样？

Answer 1

这是因为第一个容器也溢出了它的容器，这就是需要overflow:auto的原因。

为避免这种情况，您需要向容器中添加min-width:0，以便仅使其内部内容溢出，在这种情况下，您只需要在overflow:hidden box-container >

html,
body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

.window {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: cyan;
}

.home {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
}

.menu {
  width: 200px;
  border: 1px solid green;
  flex-shrink: 0;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width:0;
  flex: 1;
  border: 1px solid blue;
}

.container-header {
  width: 100%;
  text-align: center;
  background-color: purple;
}

.container-footer {
  text-align: center;
  background-color: mediumslateblue;
}

.box-container {
  display: flex;
  justify-content: space-between;
  overflow: auto;
  border: 1px green solid;
}

.box {
  width: 600px;
  height: 600px;
  margin: 10px;
  background-color: red;
  text-align: center;
  padding: 5px;
  flex-shrink: 0;
}

  <div class="window">
    <div class="header">
      <div>Left</div>
      <div>Right</div>
    </div>
    <div class="home">
      <div class="menu">
        menu
      </div>
      <div class="container">
        <div class="container-header">
          Container Header
        </div>
        <div class="box-container">
          <div class="box">
            box - 1
          </div>
          <div class="box">
            box - 2
          </div>
          <div class="box">
            box - 3
          </div>
        </div>
        <div class="container-footer">
          Container Footer
        </div>
      </div>
    </div>
    <div class="footer">
      <div>Left</div>
      <div>Right</div>
    </div>
  </div>

CSS Flexbox布局-如何滚动内部容器？

1 个答案: