Search code examples
htmlcssflexboxoverflow

Prevent flexbox div from going under header sibling when window is resized

I am having trouble preventing a flexbox div from going under its sibling (header). I have the following HTML/CSS structure:

HTML:

<div class="application">
    <header class="application-header">HEADER</header>
    <div class="application-content">
        <div class="content">
            <div class="content-header">TITLE</div>
        </div>
    </div>
</div>

CSS:

.application {
    text-align: center;
    flex-direction: column;
    min-height: 100vh;
    max-height: 100vh;
    height: 100vh;
    display: flex;    
}

.application-header {
    height: 44px;
    padding: 0.5rem;
    text-align: center;
}

.application-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1;
    overflow-y: auto;
    max-height: calc(100vh - 44px);
    text-align: center;
}

.content {
    flex-direction: column;
    max-width: 1200px;
    min-width: 800px;
    width: 80%;
    min-height: 555px;
    height: calc(100% - 40px);
    display: flex;
    top: 0px;
    position: relative;
    text-align: center;
}

.content-header {
    justify-content: center;
    font-size: 60px;
    flex-direction: row;
    width: 100%;
    min-height: 100px;
    display: flex;
}

IMAGES:

This is before resizing:

PRE-RESIZE

This is after resizing. Note that the content is behind the header:

POST-RESIZE

What I'm looking for is for after the resizing, the content stays at the top like on the first image and the overflow is scrollable. And also, I want it to be a margin between the content and the header as well. Does anybody know how I can make that div stay at its place and not hide behind the header?

If you need any other information or image, let me know. I'm not very versed in html/css so it might be simpler than it seems.

PS.: I do need the min-height on .content, or at least a way to limit how much it can shrink.

EDIT #1:

.application {
  text-align: center;
  flex-direction: column;
  min-height: 100vh;
  max-height: 100vh;
  height: 100vh;
  display: flex;
}

.application-header {
  height: 44px;
  padding: 0.5rem;
  text-align: center;
}

.application-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1;
  overflow-y: auto;
  max-height: calc(100vh - 44px);
  text-align: center;
}

.content {
  flex-direction: column;
  max-width: 1200px;
  min-width: 800px;
  width: 80%;
  min-height: 555px;
  height: calc(100% - 40px);
  display: flex;
  top: 0px;
  position: relative;
  text-align: center;
}

.content-header {
  justify-content: center;
  font-size: 60px;
  flex-direction: row;
  width: 100%;
  min-height: 100px;
  display: flex;
}
<html class="">

<head>

</head>

<body class="" style="padding-top: 0px; margin-top: 0px;">
  <div class="application">
    <header class="application-header" style="background-color: blue;">HEADER</header>
    <div class="application-content" style="background-color: red;">
      <div class="content" style="background-color: greenyellow; color: black;">
        <div class="content-header">TITLE</div>
      </div>
    </div>
  </div>
</body>

</html>

Solution

  • I was able to keep the structure full flexbox and keep a min-height with a scroll overflow on .content. I have changed all the vh to %, and added a 100% height to body and html, like @カメロン suggested. I also changed which div has overflow and min-height. But most importantly I added a wrapper on the .application-content.

    html,
body {
  height: 100%;
}

.application {
  flex-direction: column;
  min-height: 100%;
  max-height: 100%;
  height: 100%;
  display: flex;
  text-align: center;
}

.application-header {
  text-align: center;
  min-height: 44px;
}

.application-wrapper {
  flex-direction: column;
  height: calc(100% - 44px);
  display: flex;
  margin: auto;
  text-align: center;
}

.application-content {
  flex: 1 1;
  height: calc(100% - 44px);
  margin: 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.content {
  overflow-y: auto;
  flex-direction: column;
  max-width: 1200px;
  min-width: 800px;
  width: 80%;
  height: 100%;
  display: flex;
}

.content-header {
  flex-direction: row;
  min-height: 100px;
  width: 100%;
  display: flex;
}

.content-body {
  flex-direction: row;
  min-height: 455px;
  display: flex;
  flex: 1 1;
}
    <div class="application">
  <header class="application-header">HEADER</header>
  <div class="application-wrapper">
    <div class="application-content">
      <div class="content">
        <div class="content-header">TITLE</div>
        <div class="content-body"></div>
      </div>
    </div>
  </div>
</div>

    RESULT:

    Before the resize

    BEFORE-RESIZE

    And after the resize:

    AFTER-RESIZE