In the example below the element with "viewer" class it grows up over the page height
body{ padding-top:3.25rem;}.vid { height:100%; display:block;}.vidpanel { height:100%;}.vidcontent { flex-basis:auto!important;}.maincontent{ position:relative; align-items: stretch; display: flex; flex-direction: column; justify-content: space-between; height:100%;}.menuvideata { height:100%;}.cols, .col { display:flex; height:100%; flex:1;}.col { width:83%;}.sidemenu { width:222px; background-color:purple; height:100%; display:flex; flex:none; align-items: stretch; flex-direction: column; justify-content:flex-start; padding:0px;}.menu { height:500px;}.vidcontent { display: flex; flex-direction: column; padding: 0; flex:1; overflow: auto; height: 100%;}.videata { display:flex; flex-direction:column; height:100%;}.col { height:100%; flex-grow:1; margin:0; display:flex;}.panel { display:flex; flex-direction:column; height:100%;}.upload { height:60px; background-color:green}.viewer { background-color: red;display:block;}.wrapperparent { height:0;}.wrapper { height:100%; padding:12px; overflow-y:auto; flex-basis:0px; flex-grow:2; flex-shrink:1;}.scroller { display:flex; flex-direction:column;}.pagecontainer { min-height:500px;}.toolbar { display: block; height:40px; position:relative; background-color:lightblue;}<div class="vid"><div class="vidpanel"><div class="maincontent"><div class="cols"><aside class="sidemenu"><div class="menu" /></aside><section class="vidcontent col"><div class="menuvideata"><div class="videata"><div class="wrapperparent cols"><div class="wrapper"><div class="scroller"><div class="panel"><div class="upload"> UPLOAD WIDGET</div><div class="viewer"><div class="pagecontainer"><div class="toolbar"> TOOLBAR</div><div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada et erat quis interdum. Donec ullamcorper libero et ex auctor, nec maximus lectus pellentesque. Fusce commodo tortor non pulvinar congue. Etiam euismod, est et ullamcorper accumsan, erat sapien lobortis tortor, ut ullamcorper quam nulla sit amet ipsum. Donec a turpis ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. In in suscipit tortor. Donec facilisis aliquam justo non gravida. Phasellus ut orci eu massa scelerisque congue. Etiam placerat sem a quam mollis, ac accumsan mauris tristique. Aenean in turpis eget metus sagittis venenatis.Sed euismod eleifend mi, sit amet eleifend ante vestibulum eu. In semper vitae massa ut pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed in molestie risus. Morbi tincidunt feugiat urna at suscipit. Morbi euismod lacus in orci viverra, dapibus volutpat urna sodales. Donec aliquet felis augue, id tempor nibh fermentum a. Sed id purus ac eros pretium commodo non ut nulla. Nam pulvinar velit ac elit auctor tincidunt. Cras vel felis et magna blandit sagittis fermentum sit amet magna. Maecenas sit amet accumsan nisi. Vivamus nec ligula velit. Aliquam imperdiet vehicula nulla, eleifend rutrum justo.In hac habitasse platea dictumst. Donec ac quam sodales, placerat nibh id, ultrices augue. Suspendisse vel urna nunc. Nunc id commodo nibh. Donec varius tellus nec nisi vestibulum, vitae facilisis felis porttitor. Proin laoreet nec libero nec tincidunt. Sed risus nisi, mattis vel dui sit amet, maximus fringilla urna. Cras fermentum placerat quam quis malesuada. Integer venenatis pellentesque venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada et erat quis interdum. Donec ullamcorper libero et ex auctor, nec maximus lectus pellentesque. Fusce commodo tortor non pulvinar congue. Etiam euismod, est et ullamcorper accumsan, erat sapien lobortis tortor, ut ullamcorper quam nulla sit amet ipsum. Donec a turpis ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. In in suscipit tortor. Donec facilisis aliquam justo non gravida. Phasellus ut orci eu massa scelerisque congue. Etiam placerat sem a quam mollis, ac accumsan mauris tristique. Aenean in turpis eget metus sagittis venenatis.Sed euismod eleifend mi, sit amet eleifend ante vestibulum eu. In semper vitae massa ut pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed in molestie risus. Morbi tincidunt feugiat urna at suscipit. Morbi euismod lacus in orci viverra, dapibus volutpat urna sodales. Donec aliquet felis augue, id tempor nibh fermentum a. Sed id purus ac eros pretium commodo non ut nulla. Nam pulvinar velit ac elit auctor tincidunt. Cras vel felis et magna blandit sagittis fermentum sit amet magna. Maecenas sit amet accumsan nisi. Vivamus nec ligula velit. Aliquam imperdiet vehicula nulla, eleifend rutrum justo.In hac habitasse platea dictumst. Donec ac quam sodales, placerat nibh id, ultrices augue. Suspendisse vel urna nunc. Nunc id commodo nibh. Donec varius tellus nec nisi vestibulum, vitae facilisis felis porttitor. Proin laoreet nec libero nec tincidunt. Sed risus nisi, mattis vel dui sit amet, maximus fringilla urna. Cras fermentum placerat quam quis malesuada. Integer venenatis pellentesque venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada et erat quis interdum. Donec ullamcorper libero et ex auctor, nec maximus lectus pellentesque. Fusce commodo tortor non pulvinar congue. Etiam euismod, est et ullamcorper accumsan, erat sapien lobortis tortor, ut ullamcorper quam nulla sit amet ipsum. Donec a turpis ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. In in suscipit tortor. Donec facilisis aliquam justo non gravida. Phasellus ut orci eu massa scelerisque congue. Etiam placerat sem a quam mollis, ac accumsan mauris tristique. Aenean in turpis eget metus sagittis venenatis.Sed euismod eleifend mi, sit amet eleifend ante vestibulum eu. In semper vitae massa ut pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed in molestie risus. Morbi tincidunt feugiat urna at suscipit. Morbi euismod lacus in orci viverra, dapibus volutpat urna sodales. Donec aliquet felis augue, id tempor nibh fermentum a. Sed id purus ac eros pretium commodo non ut nulla. Nam pulvinar velit ac elit auctor tincidunt. Cras vel felis et magna blandit sagittis fermentum sit amet magna. Maecenas sit amet accumsan nisi. Vivamus nec ligula velit. Aliquam imperdiet vehicula nulla, eleifend rutrum justo.In hac habitasse platea dictumst. Donec ac quam sodales, placerat nibh id, ultrices augue. Suspendisse vel urna nunc. Nunc id commodo nibh. Donec varius tellus nec nisi vestibulum, vitae facilisis felis porttitor. Proin laoreet nec libero nec tincidunt. Sed risus nisi, mattis vel dui sit amet, maximus fringilla urna. Cras fermentum placerat quam quis malesuada. Integer venenatis pellentesque venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada et erat quis interdum. Donec ullamcorper libero et ex auctor, nec maximus lectus pellentesque. Fusce commodo tortor non pulvinar congue. Etiam euismod, est et ullamcorper accumsan, erat sapien lobortis tortor, ut ullamcorper quam nulla sit amet ipsum. Donec a turpis ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. In in suscipit tortor. Donec facilisis aliquam justo non gravida. Phasellus ut orci eu massa scelerisque congue. Etiam placerat sem a quam mollis, ac accumsan mauris tristique. Aenean in turpis eget metus sagittis venenatis.Sed euismod eleifend mi, sit amet eleifend ante vestibulum eu. In semper vitae massa ut pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed in molestie risus. Morbi tincidunt feugiat urna at suscipit. Morbi euismod lacus in orci viverra, dapibus volutpat urna sodales. Donec aliquet felis augue, id tempor nibh fermentum a. Sed id purus ac eros pretium commodo non ut nulla. Nam pulvinar velit ac elit auctor tincidunt. Cras vel felis et magna blandit sagittis fermentum sit amet magna. Maecenas sit amet accumsan nisi. Vivamus nec ligula velit. Aliquam imperdiet vehicula nulla, eleifend rutrum justo.In hac habitasse platea dictumst. Donec ac quam sodales, placerat nibh id, ultrices augue. Suspendisse vel urna nunc. Nunc id commodo nibh. Donec varius tellus nec nisi vestibulum, vitae facilisis felis porttitor. Proin laoreet nec libero nec tincidunt. Sed risus nisi, mattis vel dui sit amet, maximus fringilla urna. Cras fermentum placerat quam quis malesuada. Integer venenatis pellentesque venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada et erat quis interdum. Donec ullamcorper libero et ex auctor, nec maximus lectus pellentesque. Fusce commodo tortor non pulvinar congue. Etiam euismod, est et ullamcorper accumsan, erat sapien lobortis tortor, ut ullamcorper quam nulla sit amet ipsum. Donec a turpis ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. In in suscipit tortor. Donec facilisis aliquam justo non gravida. Phasellus ut orci eu massa scelerisque congue. Etiam placerat sem a quam mollis, ac accumsan mauris tristique. Aenean in turpis eget metus sagittis venenatis.Sed euismod eleifend mi, sit amet eleifend ante vestibulum eu. In semper vitae massa ut pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed in molestie risus. Morbi tincidunt feugiat urna at suscipit. Morbi euismod lacus in orci viverra, dapibus volutpat urna sodales. Donec aliquet felis augue, id tempor nibh fermentum a. Sed id purus ac eros pretium commodo non ut nulla. Nam pulvinar velit ac elit auctor tincidunt. Cras vel felis et magna blandit sagittis fermentum sit amet magna. Maecenas sit amet accumsan nisi. Vivamus nec ligula velit. Aliquam imperdiet vehicula nulla, eleifend rutrum justo.In hac habitasse platea dictumst. Donec ac quam sodales, placerat nibh id, ultrices augue. Suspendisse vel urna nunc. Nunc id commodo nibh. Donec varius tellus nec nisi vestibulum, vitae facilisis felis porttitor. Proin laoreet nec libero nec tincidunt. Sed risus nisi, mattis vel dui sit amet, maximus fringilla urna. Cras fermentum placerat quam quis malesuada. Integer venenatis pellentesque venenatis.</div></div></div></div></div></div></div></div></div></section></div></div></div>I need to extend element with viewer class to the end of the page and I need to have a scroll bar when the text inside it exceed the available space.I can't change level upper than viewer to accomplish my goal.
Could you suggest me a way?Thanks