How to grow height of an element when it is overflowed

Question

I have a timeline component and the data in it is being set dynamically mapping an array. Everything works fine, but when I add more data, the element which should be overflowed on y if the max height is reached, isn't displayed entirely. I tried everything, but I don't get the expected result. Here is my CodeSandBox.

My scss file:

// Mixins
@import "mixins";

// Timeline
// $timeline-color: #ee4d4d;

.timelineWrapper{
    overflow-y: auto;
    min-height: 30vh;
    max-height: 80vh;

}  

#timeline {
    line-height: 1.5em;
    font-size: 14px;
    width: 90%;
    margin: 30px auto;
    position: relative;
    // overflow-x: hidden;
//   overflow-y: scroll;
  
    @include prefix(transition, all .4s ease);
    
    &, 
    *, 
    *:before,
    *:after {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    &:before {
        content:"";
        width: 5px;
        height: 100%;
        background: #26C17E;
        left: 50%;
        top: 0;
        position: absolute;
        
    }

    &:after {
        content: "";
        clear: both;
        display: table;
        width: 100%;
        
    }
    
    .timeline-item {
        margin-bottom: 50px;
        position: relative;
        
        @extend %clearfix;

        .timeline-icon {
            background:white ;
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 50%;
            // overflow: hidden;
            margin-left: -23px;
            @include prefix(border-radius, 50%);



            // .year {
            //  position: relative;
            //  text-align: center;
            //  //transform: translate(50%, 50%);
            // }
        }

        .year {
            position: absolute;
            top:-6px;

            font-family: Open Sans;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 120%;
            //transform: translate(50%, 50%);
        }

        .timeline-content {
            // width: 882px;
            background: #EEEEEE;
            padding: 10px 10px 5px 15px;
            position: relative;
            @include prefix(box-shadow, 0 3px 0 rgba(0,0,0,0.1));
            @include prefix(border-radius, 5px);
            // @include prefix(transition, all .3s ease);

            h2 {
                font-family: Open Sans;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 120%;
                // @include prefix(border-radius, 3px 3px 0 0);
            }

            p{
                font-family: Open Sans;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 150%;
padding-left: 5px;
            }

            &:before {
                content: '';
                position: absolute;
                top: 20px;
                right: -5px;
                width: 14px;
                height: 14px; 
                background-color: #EEEEEE;
                display: block;
                border-radius: 3px;
                transform: rotate(45deg);
            }

            &.right {
                float: right;

                &:before {
                    left: -5px;
                    right: inherit;
                }
            }
        }
    }
}

#timeline {
    // margin: 30px;
    // padding: 5px;;
    margin-left:10px;
    padding: 0;
    
    &:before {
        left: 15px;
    }
    
    .timeline-item {
        .timeline-content {
            // width: 95%;
            // float: right;
            margin-left:70px;
            // margin-left:40px;
            &:before,
            &.right:before {
                left: -5px;
                right: inherit;
            }
        }

        .timeline-icon {
            left: 15px;
        }
    }
}

.year{
    color:black;
    text-align:center;
    margin-top:20px;
}
// @media screen and (max-width: 768px) {
//  #timeline {
//      margin: 30px;
//      padding: 0;
//      &:before {
//          left: 0;
//      }
        
//      .timeline-item {
//          .timeline-content {
//              width: 90%;
//              float: right;
                
//                 &:before,
//                 &.right:before {
//                  left: -5px;
//                  right: inherit;
//              }
//          }

//          .timeline-icon {
//              left: 0;
//          }
//      }
//  }
// }

Component:

<>
 <section>
 <h1>Education</h1>
 <div id="timeline" className='timelineWrapper'>
     {data.map((info)=>(
             <div className="timeline-item">
                 <span className="timeline-icon">
                     <span>&nbsp;&nbsp;</span>
                 <span className="year">{info.date}</span>
                 </span>
                 <div className='timeline-content'>
                 <h2>{info.title}</h2>
                 <p>{info.text}</p>
                 </div>
             </div>
     ))}
 </div>
 </section>
 </>  

Component should have an internal scroll with a height equal to 30vh* (30%) and a max height of 80vh (80%):

I need that green bar be displayed proportionally with how many items are being added there. Could you help me please? #timeline is the container and that is the green line:

&:before {
        content:"";
        width: 5px;
        height: 100%;
        background: #26C17E;
        left: 50%;
        top: 0;
        position: absolute; 

Answer 1

By adding a div with timelineContainer class in App.js and changing timeline.scss a little bit, I am getting I think what you want. Here is a live CodeSandbox and the code:

App.js:

import "./styles.css";

export default function App(props) {
  const { data } = props;
  return (
    <section>
      <h1>Education</h1>
      <div className="timelineContainer">
        <div id="timeline" className="timelineWrapper">
          {data.map((info, index) => (
            <div className="timeline-item" key={index}>
              <span className="timeline-icon">
                <span>&nbsp;&nbsp;</span>
                <span className="year">{info.date}</span>
              </span>
              <div className="timeline-content">
                <h2>{info.title}</h2>
                <p>{info.text}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Timeline.scss:

// Mixins
@import "mixins";

// Timeline
// $timeline-color: #ee4d4d;
 

.timelineContainer{
    overflow-y: auto;
    min-height: 30vh;
    max-height: 80vh;
}

.timelineWrapper {
    line-height: 1.5em;
    font-size: 14px;
    width: 90%;
    margin: 30px auto;
    position: relative;
   
    // overflow-x: hidden;
//   overflow-y: scroll;
  
    @include prefix(transition, all .4s ease);
    
    &, 
    *, 
    *:before,
    *:after {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    &:before {
        content:"";
        width: 5px;
        height: 100%;
        background: #26C17E;
        left: 50%;
        top: 0;
        position: absolute;
        
    }

    &:after {
        content: "";
        clear: both;
        display: table;
        width: 100%;
        
    }
    
    .timeline-item {
        margin-bottom: 50px;
        position: relative;
        
        @extend %clearfix;

        .timeline-icon {
            background:white ;
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 50%;
            // overflow: hidden;
            margin-left: -23px;
            @include prefix(border-radius, 50%);



            // .year {
            //  position: relative;
            //  text-align: center;
            //  //transform: translate(50%, 50%);
            // }
        }

        .year {
            position: absolute;
            top:-6px;

            font-family: Open Sans;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 120%;
            //transform: translate(50%, 50%);
        }

        .timeline-content {
            // width: 882px;
            background: #EEEEEE;
            padding: 10px 10px 5px 15px;
            position: relative;
            @include prefix(box-shadow, 0 3px 0 rgba(0,0,0,0.1));
            @include prefix(border-radius, 5px);
            // @include prefix(transition, all .3s ease);

            h2 {
                font-family: Open Sans;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 120%;
                // @include prefix(border-radius, 3px 3px 0 0);
            }

            p{
                font-family: Open Sans;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 150%;
padding-left: 5px;
            }

            &:before {
                content: '';
                position: absolute;
                top: 20px;
                right: -5px;
                width: 14px;
                height: 14px; 
                background-color: #EEEEEE;
                display: block;
                border-radius: 3px;
                transform: rotate(45deg);
            }

            &.right {
                float: right;

                &:before {
                    left: -5px;
                    right: inherit;
                }
            }
        }
    }
}

#timeline {
    // margin: 30px;
    // padding: 5px;;
    margin-left:10px;
    padding: 0;
    
    &:before {
        left: 15px;
    }
    
    .timeline-item {
        .timeline-content {
            // width: 95%;
            // float: right;
            margin-left:70px;
            // margin-left:40px;
            &:before,
            &.right:before {
                left: -5px;
                right: inherit;
            }
        }

        .timeline-icon {
            left: 15px;
        }
    }
}

.year{
    color:black;
    text-align:center;
    margin-top:20px;
}