Fixed positioned overflow not scrolls

Question

Here in my html, I don't know the header height. so how to make the content became scrollable on overflow?

.parent{
  border:2px solid red;
  position:fixed;
  top:0;
  left:0;
  width:20%;
  height:50%;
}

header{
  width:100%;
  border:1px solid red;
}

.content{
  flex:1;
  position: relative;
  overflow-y:scroll;
  background:lightgreen;
}

<div class="parent">
  <section>
    <header>
      <h1>Title</h1>  
    </header>
    <div class="content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

      Why do we use it?
      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>
  </section>
</div>

try overFlow: scroll?

radlaz
– radlaz

2018-06-26 02:49:39 +00:00
Commented Jun 26, 2018 at 2:49 — radlaz
– radlaz, Commented Jun 26, 2018 at 2:49
I tried with that, not works

user2024080
– user2024080

2018-06-26 02:51:28 +00:00
Commented Jun 26, 2018 at 2:51 — user2024080
– user2024080, Commented Jun 26, 2018 at 2:51

Steve K · Accepted Answer · 2018-06-26 03:16:32Z

I see you have the .content div with the flex:1; set you need to set the parent of your flex items to display:flex or your flexbox characteristics will not work. You also will probably want to have the flex-direction set to column. Also if you want flex items to fill the container your flex items need to be direct children of the parent that has the display:flex attached to it. So either remove the <section> or set the <section> to be the flexbox and give it the display:flex. Here is a snippet:

.parent{
  border:2px solid red;
  position:fixed;
  top:0;
  left:0;
  width:20%;
  height:50%;
  display:flex;
  flex-direction:column;
}

header{
  width:100%;
  border:1px solid red;
}

.content{
	position: relative;
  background:lightgreen;
  width:100%;
  flex:1;
  overflow-Y:scroll;
}

<div class="parent">
  <header>
    <h1>Title</h1>  
  </header>
  <div class="content">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
  </div>
</div>

Jake Miller · Accepted Answer · 2018-06-26 02:57:30Z

0

You need to specify a height value for your .content class or else overflow won't work.

.parent{
  border:2px solid red;
  position:fixed;
  top:0;
  left:0;
  width:20%;
  height:50%;
}

header{
  width:100%;
  border:1px solid red;
}

.content{
  flex:1;
  position: relative;
  overflow-y:scroll;
  height: 250px;
  background:lightgreen;
}

<div class="parent">
  <section>
    <header>
      <h1>Title</h1>  
    </header>
    <div class="content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

      Why do we use it?
      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>
  </section>
</div>

Edit: Use max-height if dynamic content is being used so a static height isn't acceptable. Then the content you receive from the backend will take up as much space as it needs until it reaches the max height value and then overflow.

edited Jun 26, 2018 at 2:57

answered Jun 26, 2018 at 2:51

Jake Miller

2,6622 gold badges27 silver badges41 bronze badges

5 Comments

user2024080 Over a year ago

I don't want to set the height here. If I set the height it works. I am getting content from backend, in case if the content overflows need to scroll. unless I don't want to set the height for minimal content(s)

Jake Miller Over a year ago

@user2024080 Use max-height then. Then the content you receive from the backend will take up as much space as it needs until it reaches the max height value and then it'll overflow.

Priyesh Kumar Over a year ago

@user2024080 In that case you can add min/max height. But you need to add height to get scroll working

user2024080 Over a year ago

@JakeMiller - adding ` max-height:80%;` not works next.plnkr.co/edit/Ilm7tdcGXOOpV1Kb?open=lib%2Fscript.js, same case if I add the max-height:300px then it works. looks for px values

Toan Lu Over a year ago

@user2024080 You need to use calc(80%) for max-height

Collectives™ on Stack Overflow

Fixed positioned overflow not scrolls

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related