时间戳

首页 > 解决方案 > Flex 列子子溢出高度

html - Flex 列子子溢出高度

问题描述

我有一个包含顶部标题、内容区域和页面容器的简单应用程序的框架，如下所示：

.container {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: red;
}

.appheader {
  width: 100%;
  background-color: #cdcdcd;
  color: blue;
  text-align: center;
}

.appcontent {
  width: 100%;
  height: 100%;
  background-color: blue;
}

.appcontentheader {
  width: 100%;
  background-color: black;
  color: white;
  text-align: center;
  padding: 10px;
}

.page {
  display: flex;
  flex-direction: column;
  background-color: yellow;
  margin: 0px 50px 0px 50px;
  width: 100%;
  height: 100%;
}

.pagetitle {
  background-color: grey;
  color: orange;
  text-align: center;
}

.pagecontent {
  padding: 20px;
  background-color: grey;
  color: orange;
}
<div class="container">
  <div class="appheader">
    <h2>

      MY APPLICATION MENU</h2>
  </div>
  <div class="appcontent">
    <div class="appcontentheader">
      <h4>
        Section Title
      </h4>
    </div>
    <div class="page">

      <div class="pagetitle">
        <h1>
          PAGE TITLE
        </h1>
      </div>

      <div class="pagecontent">
        <p>

          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>

  </div>
</div>

我希望整个内容都可以放在一个页面中，而无需水平或垂直滚动​​。

至于这个例子，我的appcontent和page都溢出了 x 和 y 轴（黄色和黑色区域都溢出了）。

似乎是我的级联宽度：100% 和高度：100% 定义的问题。

为什么会发生这种情况以及如何正确修复它（将整个内容保留在视图中而不滚动，不使用scroll-x/y: hidden?

标签： htmlcssflexbox

解决方案

您还需要将弹性框应用于其包装器中的页面内容：

.page{    
  display: flex;
  flex-direction: column;
  ...
}

这将确保允许页面内容根据您的布局正确弯曲。

推荐阅读