CODEWITHSUNDEEP
htmlcssflexbox
Mendes
Mendes

Reputation: 18451

Flex column subchild overflowing height

I have a skeleton of a simple application containing a top header, a content area and page containers, as follows:

.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>

I expected the whole content to fit into a single page, without scrolling either horizontally or vertically.

As for the example, both my appcontent and page are overflowing x and y axis (yellow and black areas are overflowing).

Seens to be problems with my cascade width: 100% and height: 100% definitions.

Why is that happenning and how to fix it properly (keep the whole content in a view without scrolling, without using scroll-x/y: hidden ?

Upvotes: 0

Views: 51

Answers (1)

grantmx
grantmx

Reputation: 399

You need to also apply flex box to the page contents in its wrapper:

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

This will make sure that the page contents are allow allowed to flex correctly according your layout.

Upvotes: 1

Related Questions