How to center scrollable content with header?-CodePudding

I'm trying to center some content. The content is larger than the parent and therefore requires scrolling. There is also a header at top. For some reason, the scroll height clips the scrollable content. Thoughts on how I should fix the issue?

Here's the fiddle: https://jsfiddle.net/xgsqyu45/

.app {
  height: 400px;
}

.header {
  width: 100%;
  height: 44px;
  background-color: grey;
  border: 2px solid;
}

.container {
  border: 1px solid red;
  height: 100%;
}

.scroll {
  overflow: scroll;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  height: 600px;
  width: 300px;
  margin: 12px;
  border: 2px solid blue;
}

<div >
  <div >
  </div>
  <div >
    <div >
      <div >
      </div>
    </div>
  </div>
</div>

CodePudding user response：

If you set style for scrollbar see this code

.auto {
  border: 1px solid green;
  height: 70px;
  overflow-y: auto;
  display: inline-block;
}

.scroll {
  height: 70px;
  overflow-y: auto;
  display: inline-block;
  padding-right: 17px;
}

.scroll div {
  border: 1px solid gold;
  padding: 2px;
  float: left;
}

::-webkit-scrollbar {
  width: 10px;
}


/* Track */

::-webkit-scrollbar-track {
  background: #f1f1f1;
}


/* Handle */

::-webkit-scrollbar-thumb {
  background: #888;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

<p>scroll bar thakes up the whole div:</p>
<div >
  <div>
    a<br /> b
    <br /> c
    <br /> d
    <br />
  </div>
</div>
<p>it should look like this :</p>
<div >
  <div>
    a<br /> b
    <br /> c
    <br /> d
    <br />
  </div>
</div>

<p>but without this effect when there is no overflow:</p>
<div >
  <div>
    a<br /> b
    <br /> c
    <br />
  </div>
</div>

CodePudding user response：

You are limiting the height of the .content element but you do not set overflow:auto or overflow:scroll on it - you only do on it's parent.

By the way, the height:100% on .container is problematic because the header already takes part of the parent's height. Better leave this height to be automatic.

Demo: Here is the code in the question, with a long text added inside `.content', and below that the same code with little modifications in the CSS.

.app {
  height: 400px;
}

.header {
  width: 100%;
  height: 44px;
  background-color: grey;
  border: 2px solid;
}

.container {
  border: 1px solid red;
  height: 100%;
}

.scroll {
  overflow: scroll;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  height: 600px;
  width: 300px;
  margin: 12px;
  border: 2px solid blue;
}

<div >
  <div >
  </div>
  <div >
    <div >
      <div >
        Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text 
      </div>
    </div>
  </div>
</div>

.app {
  height: 400px;
}

.header {
  width: 100%;
  height: 44px;
  background-color: grey;
  border: 2px solid;
}

.container {
  border: 1px solid red;
  height: calc(100% - 50px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll {
  overflow: scroll;
  margin: 12px;
  height: calc(100% - 24px);
  border: 2px solid blue;
}

.content {
  width: 300px;
}

<div >
  <div >
  </div>
  <div >
    <div >
      <div >
        Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text 
      </div>
    </div>
  </div>
</div>