Question

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

.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而不滚动就将整个内容保留在视图中？

Answer 1

您还需要将flex box应用于包装器中的页面内容：

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

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

Flex列子子项溢出高度

1 个答案: