How to stop flex element from growing over window

Question

Hey I am currently struggling with the following: I have <div class="result-text"> that contains text. I want that the <header> and <footer> is always visible but if there is to much text in the div they disappear and I can scroll. This is not what I want.

The <div> should be scrollable.

The "main" scrollbar should not exists. The only thing which should be scrollable is the <div> that contains all the text. If i resize the window there must be always visible the header, sidebar and the footer. The <div> element with the text should always fill the remaining text.

html,
body {
  margin: 0;
  background-color: gray;
}

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  display: flex;
  flex: 1;
  background-color: #00ac17;
}

header {
  height: 35px;
  background-color: #004d20;
}

footer {
  height: 25px;
  background-color: #49fa7e;
  color: rgb(19, 19, 19);
}

.sidebarleft {
  flex: 0 0 55px;
  background-color: blue;
}


.data {
  flex-grow: 1;
  background-color: rgb(185, 46, 46);
}

.textcontent {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 50%;
  float: left;
  background-color: rgb(152, 43, 255);
}

.diagram {
  height: 100%;
  width: 50%;
  float: left;
  background-color: rgb(113, 1, 165);
}

.input-textarea {
  resize: none;
  height: 100px;
}

.result-text {
  background-color: grey;
  flex: 1;
  overflow: scroll;
  text-align: justify;
  padding: 20px;
}

.button1 {
  flex: 0;
}

.button2 {
  flex: 1;
}

.button3 {
  flex: 1;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Layout</title>
  </head>
  <body>
    <div class="wrapper">
      <header></header>
      <main>
        <div class="sidebarleft"></div>
        <div class="data">
          <div class="textcontent">
            <textarea class="input-textarea"></textarea>
            <button class="button1">button1</button>
            <div class="result-text">
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text .
            </div>
          </div>
          <div class="diagram"></div>
        </div>
      </main>
      <footer></footer>
    </div>
  </body>
</html>

I made a fiddle that you can view that has all my code: https://jsfiddle.net/n3zyLgcb/4/

The following design should stay, also if I resize the entire window:

But if there is to much text it looks like this:(not the behavior I want)

I do not want the scrollbar on the far right:(changed my code like @Faizal_Hussain said. )

Does this answer your question? https://stackoverflow.com/questions/9707397/making-a-div-vertically-scrollable-using-css — Rani Giterman, Mar 28 '22 at 15:40
Hi and thanks for the answer. Unfortunately this is not answering my problem. I tried many different things but i could not get it to work properly. — swftowu69, Mar 28 '22 at 15:52
Added a snippet of the code in the fiddle to the question - hope I did not mess up the visuals of that... — Mark Schultheiss, Mar 28 '22 at 16:08

Faizal Hussain · Accepted Answer · 2022-03-28T15:59:18.160

2

Because both the header and footer are in a static position, you can check the static position here , https://www.w3schools.com/css/css_positioning.asp

The fix should be in such a way that the position of these headers and footers should not change when we scroll , to do this add position fixed, like

header {
  height: 35px;
  background-color: #004d20;
  position:fixed;
  width:100%;
  top : 0
}

footer {
height: 25px;
background-color: #49fa7e;
color: rgb(19, 19, 19);
position : fixed;
bottom : 0
width : 100%
}

main{
overflow-y: auto;
}

edited Mar 28 '22 at 15:59

answered Mar 28 '22 at 15:43

Faizal Hussain

1,551
2
10
18

1

Thanks for the answer. It makes it a bit better but i don't want site scrolling. The only scrollable element should be the `
` element on the side. In your version there is still site scrolling enabled and div scrolling disabled.
– swftowu69 Mar 28 '22 at 15:48
1

Thanks a lot Faizal. Its now working properly :) – swftowu69 Mar 28 '22 at 16:01

score 0 · Answer 2 · answered Mar 28 '22 at 15:38

html,
body {
  margin: 0;
  background-color: gray;
}

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  display: flex;
  flex: 1;
  background-color: #00ac17;
}

header {
  height: 35px;
  background-color: #004d20;
  position:fixed;
  width:100%;
}

footer {
  height: 25px;
  background-color: #49fa7e;
  color: rgb(19, 19, 19);
}

.sidebarleft {
  flex: 0 0 55px;
  background-color: blue;
}


.data {
  flex-grow: 1;
  background-color: rgb(185, 46, 46);
}

.textcontent {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 50%;
  float: left;
  background-color: rgb(152, 43, 255);
}

.diagram {
  height: 100%;
  width: 50%;
  float: left;
  background-color: rgb(113, 1, 165);
}

.input-textarea {
  resize: none;
  height: 100px;
}

.result-text {
  background-color: grey;
  flex: 1;
  overflow: scroll;
  text-align: justify;
  padding: 20px;
  max-height:500px;
  overflow:scroll;
}

.button1 {
  flex: 0;
}

.button2 {
  flex: 1;
}

.button3 {
  flex: 1;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Layout</title>
  </head>
  <body>
    <div class="wrapper">
      <header>nk</header>
      <main>
        <div class="sidebarleft"></div>
        <div class="data">
          <div class="textcontent">
            <textarea class="input-textarea"></textarea>
            <button class="button1">button1</button>
            <div class="result-text">
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text . Here is a lot of text . Here is a lot of text . Here is a
              lot of text . Here is a lot of text . Here is a lot of text . Here
              is a lot of text . Here is a lot of text . Here is a lot of text .
              Here is a lot of text . Here is a lot of text . Here is a lot of
              text .
            </div>
          </div>
          <div class="diagram"></div>
        </div>
      </main>
      <footer>mkmk</footer>
    </div>
  </body>
</html>

Thanks for the answer but this is not working how i want it. If i resize the window the layout should stay. Also the `result-text` field should always fill out the entire space. This i s also not the case in your answer. — swftowu69, Mar 28 '22 at 15:44

How to stop flex element from growing over window

2 Answers2