Absolute positioned container with scrollable inner html-CodePudding

I'm currently working on a project where I am forced to position my container absolute. The inner html of the container contains a list. That list should take a max height of 200px and should be scrollable. Unfortunately my idea not seems to work.

<div>
  <ul>
    <li>Item 1</li>
     <li>Item 1</li>
      <li>Item 1</li>
       <li>Item 1</li>
        <li>Item 1</li>
         <li>Item 1</li>
         <li>Item 1</li>
     <li>Item 1</li>
      <li>Item 1</li>
       <li>Item 1</li>
        <li>Item 1</li>
         <li>Item 1</li>
         <li>Item 1</li>
     <li>Item 1</li>
      <li>Item 1</li>
       <li>Item 1</li>
        <li>Item 1</li>
         <li>Item 1</li>
         <li>Item 1</li>
     <li>Item 1</li>
      <li>Item 1</li>
       <li>Item 1</li>
        <li>Item 1</li>
         <li>Item 1</li>
  </ul>
</div>

<style>

div {
  position: absolute;
  top: 50px;
  border: 1px solid red;
  max-height: 100px;
}

div ul {
  position: relative;
   max-height: 100px;
   border: 1px solid green;
   overflow: visible;
}

</style>

CodePudding user response：

You have to set overflow: scroll; for wrapper of content. Try it:

div {
  position: absolute;
  top: 50px;
  border: 1px solid red;
  max-height: 200px;
  overflow: scroll;
}

div ul {
  position: relative;
  border: 1px solid green;
}

<div>
  <ul>
    <li>Item 1</li>
     <li>Item 1</li>
      <li>Item 1</li>
       <li>Item 1</li>
        <li>Item 1</li>
         <li>Item 1</li>
         <li>Item 1</li>
     <li>Item 1</li>
      <li>Item 1</li>
       <li>Item 1</li>
        <li>Item 1</li>
         <li>Item 1</li>
         <li>Item 1</li>
     <li>Item 1</li>
      <li>Item 1</li>
       <li>Item 1</li>
        <li>Item 1</li>
         <li>Item 1</li>
         <li>Item 1</li>
     <li>Item 1</li>
      <li>Item 1</li>
       <li>Item 1</li>
        <li>Item 1</li>
         <li>Item 1</li>
  </ul>
</div>

CodePudding user response：

your code doesn't work because you set overflow: visible change it to the overflow: scroll and it becomes scrollable :)