Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .container
  aside
    ul
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
      li asd
  section 
    p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id fringilla diam, id cursus risus. Proin vestibulum elit mauris, vitae faucibus ex ultricies eu. Maecenas finibus faucibus dapibus. Praesent tristique convallis laoreet. Donec posuere massa nunc, ac facilisis lorem pretium id. Etiam tristique feugiat sem, nec bibendum sem pretium et. Praesent vel felis posuere, vestibulum magna vitae, blandit tellus. Quisque vitae pellentesque eros. Suspendisse eget neque finibus, imperdiet dui sed, scelerisque augue. In sollicitudin velit ornare molestie tincidunt. In elementum, diam vel pellentesque semper, nisl felis ornare tortor, sit amet venenatis quam augue eget mauris. Pellentesque posuere felis neque, sit amet posuere sem ullamcorper facilisis. Nunc vestibulum convallis ligula, vel porta nunc viverra ut. Pellentesque ut risus eu sapien lacinia commodo at et metus.

    p Vivamus porttitor diam id congue maximus. Aenean aliquam lorem eget venenatis rhoncus. Integer pulvinar condimentum arcu ut sollicitudin. Nulla rutrum ex nec diam interdum euismod. Proin ac lacinia ipsum. Aenean ac arcu gravida, consequat quam a, dictum mi. In semper est justo, id egestas ante sodales sit amet.

    p Donec nec quam pulvinar, tristique justo sit amet, hendrerit nunc. Donec molestie justo arcu, in ornare erat bibendum in. Morbi ornare massa non egestas condimentum. In hac habitasse platea dictumst. Aliquam eget leo vel ipsum maximus sollicitudin. Duis nec ornare augue. Maecenas et libero in justo dictum porttitor. Etiam sit amet odio scelerisque, posuere enim a, posuere mi. In cursus eu sem id accumsan.

    p Donec eget urna fermentum, vestibulum diam id, efficitur ex. Etiam malesuada est sapien, quis ornare tortor finibus in. Curabitur est tellus, fringilla vitae turpis eu, cursus consequat ligula. Duis sollicitudin nisl non enim rutrum, sit amet sollicitudin risus eleifend. Nullam luctus tincidunt placerat. Sed odio diam, venenatis ac eros a, mattis facilisis augue. Cras et eros id nisl pharetra fermentum. Nam finibus diam sapien, sit amet tempor ligula porta non.

    p Suspendisse potenti. Nullam condimentum tortor lacus, vitae suscipit orci gravida vitae. Mauris blandit mauris eget dolor varius mollis. Quisque iaculis urna purus, scelerisque facilisis metus dapibus at. Integer fringilla eu nunc eu luctus. Nam id sapien nec nunc dictum blandit. Mauris vel arcu sapien. Vivamus at tristique felis. Mauris vulputate metus vehicula congue viverra. Phasellus molestie finibus placerat.

    p Aenean id nisl purus. Pellentesque aliquam, est id porttitor luctus, urna magna ultrices mi, sed vestibulum metus lectus quis diam. Vestibulum pretium dolor in justo aliquet, vitae posuere ipsum imperdiet. Etiam lobortis, arcu ac maximus semper, lorem felis accumsan metus, a egestas magna magna eu nisi. Phasellus tempus turpis ligula, non luctus odio euismod et. Donec sed fringilla purus. Cras vitae mattis mauris, nec vestibulum nibh.

    p Phasellus nec nisl id magna ullamcorper ornare vitae vel nulla. Suspendisse diam sapien, dignissim a pellentesque et, molestie at tellus. Nulla facilisi. In a venenatis felis. Donec condimentum vulputate eros ac accumsan. Mauris at urna id tortor mollis iaculis. Quisque varius iaculis neque id auctor. Quisque vel aliquet nisi. Fusce lobortis scelerisque elit. Cras dui nulla, tristique vitae nibh vel, dignissim cursus sapien. Proin sed mi pellentesque, iaculis lectus vel, consequat nibh. Praesent mollis mi est, non tincidunt odio dignissim a. Curabitur massa velit, dapibus sit amet nisi id, vehicula efficitur dolor. Integer aliquam turpis ipsum, sit amet laoreet tortor dapibus at. Suspendisse vitae ante facilisis, porttitor quam sed, facilisis nunc. Donec condimentum ultricies est, in ornare justo.

    p Pellentesque tempor dictum massa, eget venenatis leo sollicitudin ut. Duis rutrum metus sed purus congue bibendum. Pellentesque ac leo lacinia, egestas velit eu, pharetra justo. Suspendisse facilisis et mi vitae scelerisque. Praesent tellus lorem, accumsan ac nulla eget, tincidunt consectetur sapien. Phasellus luctus erat eget est pretium efficitur. Etiam molestie lorem sed risus pretium, eget tristique sem tristique. Nunc mollis dolor ultricies ipsum laoreet, non semper nisi viverra. Suspendisse laoreet fringilla blandit. Aliquam dui ante, lacinia vitae elit et, vehicula vehicula tellus. Etiam vitae placerat urna, sodales tempus nulla. Sed placerat sed leo et luctus. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    p Morbi malesuada et tortor et eleifend. Duis scelerisque ligula a pretium laoreet. Fusce pulvinar turpis sed lacus convallis, vitae luctus urna faucibus. Curabitur ullamcorper tempus lectus, ut fringilla risus sagittis vel. Fusce a lectus sem. Nulla et placerat risus. Mauris quis ultricies leo, vel hendrerit velit. Cras dapibus eu leo et dignissim. Fusce vitae gravida tortor. Nulla viverra lectus vel tincidunt aliquet. Nunc egestas fringilla mollis. In tincidunt faucibus lorem.

    p In sagittis purus at mattis ullamcorper. Nam nec eros vitae tellus pellentesque viverra a id mauris. Donec faucibus, sem non imperdiet cursus, elit metus dictum urna, non semper elit libero in dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean scelerisque dui quis ligula convallis consectetur vitae ac ex. Pellentesque consequat eu purus id venenatis. Morbi tincidunt libero a commodo vulputate. Maecenas imperdiet, lectus ac tempor placerat, ex ante facilisis sapien, aliquet porttitor erat est a nibh.

    p Vivamus pellentesque diam erat, eget feugiat velit rhoncus nec. Sed in ipsum nibh. Quisque a tortor tristique, laoreet sapien vitae, imperdiet arcu. Nam vel lobortis lorem. Etiam lectus massa, facilisis eu tristique a, efficitur non augue. Vivamus facilisis sit amet lacus nec fringilla. Morbi commodo nunc sit amet leo semper molestie. Sed suscipit ante consectetur, vulputate elit ut, ullamcorper dolor. Nunc feugiat luctus elit, ut aliquet lectus efficitur ac. In hac habitasse platea dictumst. Aliquam pulvinar tortor velit, ac sodales felis feugiat eu. Curabitur vehicula risus ac nunc faucibus, ut consectetur nisi tristique. Etiam id ante non lectus ultrices tincidunt. Donec tempus metus in risus accumsan fringilla. Quisque ut libero sed ex finibus elementum vel at libero. Pellentesque ornare justo nulla, in elementum nisl rutrum non.

    p Maecenas nec ligula eget sapien ultrices egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec ornare eros. Integer turpis odio, finibus a urna eu, pulvinar ultricies urna. Sed ultricies sem et semper commodo. Etiam sed leo volutpat, accumsan tellus quis, pharetra felis. Integer neque odio, posuere vel urna non, aliquam faucibus quam.

    p Quisque euismod enim libero, in condimentum ligula maximus sed. Integer vel ante ut tellus tincidunt vehicula ut sed lorem. Donec metus sem, aliquet eget eros ut, maximus volutpat elit. Nullam dolor ligula, venenatis porttitor ex et, condimentum eleifend nulla. Integer est tortor, aliquam ut tempus in, ullamcorper id lacus. Suspendisse felis urna, dignissim maximus tellus eu, scelerisque finibus orci. Duis blandit nibh eu metus commodo condimentum. Proin tincidunt cursus lorem nec porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget nisl imperdiet, lacinia metus ac, dictum odio. Phasellus in augue vel enim interdum pellentesque. Mauris dignissim eleifend risus eu fermentum. Fusce placerat sed urna ac pharetra. Donec interdum enim sed dignissim aliquet. Mauris volutpat ultricies dictum. Nullam dignissim laoreet pharetra.

    p Proin scelerisque ultrices dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet libero massa. Ut id eros massa. Donec euismod enim leo, nec consequat erat dictum vulputate. Etiam tincidunt, elit nec venenatis hendrerit, nisl dolor maximus magna, a hendrerit ligula ante quis eros. Nam interdum imperdiet tristique. Vestibulum varius magna eu ipsum iaculis, quis iaculis tortor facilisis.

    p Proin bibendum eu tortor eu efficitur. Praesent ornare mollis urna sit amet auctor. Praesent hendrerit, mi in lobortis hendrerit, elit lacus dignissim augue, quis pulvinar leo sem at mi. Cras at vulputate augue, ac commodo odio. Nunc ac quam dapibus elit varius faucibus. Nulla hendrerit leo in felis lacinia, eu vulputate nibh varius. Phasellus et pellentesque metus, eget vulputate ex. Duis id ligula sed velit commodo porta. Pellentesque et velit eros. Fusce nec augue eget eros lacinia tincidunt. Maecenas purus elit, varius in hendrerit sit amet, rutrum non sapien. Vivamus porta ligula nulla, at pellentesque ipsum tristique ac.

    p Phasellus et magna cursus, egestas ligula eget, consequat metus. Donec finibus vitae ligula id viverra. Nulla facilisi. Nulla sed diam vel nisi consectetur commodo. Fusce pulvinar rutrum est, eu tincidunt erat aliquet id. Curabitur eu urna sit amet tellus blandit eleifend non a sem. Duis neque sapien, condimentum eu placerat ut, egestas quis sapien. Aenean nec risus orci. Praesent malesuada, velit id dignissim fringilla, erat nisl commodo metus, vitae pellentesque mauris elit vel turpis. In sit amet lorem dignissim tellus aliquam venenatis. Nam eget felis id magna accumsan mattis. Mauris quis lectus venenatis, sollicitudin diam eu, tempus enim. Maecenas lacus mauris, hendrerit quis purus id, eleifend imperdiet est. Suspendisse euismod erat at finibus elementum. Donec consectetur purus mi.

    p Cras lacinia eget risus in ornare. Donec lacinia urna non bibendum vehicula. Suspendisse quam nisi, lobortis sed maximus in, dapibus vitae sapien. Vestibulum ex tortor, molestie eu elit nec, lobortis pulvinar odio. Vestibulum id dolor a lectus malesuada varius. Sed semper ullamcorper ipsum, non convallis leo ultrices ac. Aliquam efficitur tortor dui, eget finibus nisl vehicula ut. Nunc vel ipsum eu est mattis imperdiet. Fusce aliquet rhoncus enim, facilisis convallis metus aliquet nec.

    p Vivamus convallis id magna vel finibus. Quisque in nibh venenatis, aliquet odio nec, venenatis enim. Quisque vitae leo velit. Quisque varius in magna sit amet egestas. Integer ornare neque odio, vel volutpat augue faucibus eget. Praesent nec est at erat pellentesque consectetur. Mauris faucibus leo non nulla faucibus consectetur. Suspendisse nunc magna, rhoncus id elementum nec, congue sit amet urna. Ut ut ex tortor. Curabitur mattis purus eget nisi egestas imperdiet. Nunc sollicitudin molestie orci sed fermentum. Morbi quis varius tellus, id suscipit orci. Aenean lobortis mauris lectus, in vehicula turpis varius lacinia.

    p In hac habitasse platea dictumst. Suspendisse dignissim feugiat congue. Nam dignissim, dolor in consequat vehicula, nisi urna pharetra nisi, at porttitor turpis lorem sed tellus. Integer in rhoncus diam. Aenean ut enim vel enim sodales lacinia. Vivamus lobortis nibh non lacus scelerisque porttitor. Mauris porttitor justo quis rutrum tristique. Cras convallis euismod sodales. Donec id molestie urna. Suspendisse feugiat nisi et euismod efficitur. Pellentesque tincidunt non elit at tincidunt. Duis sit amet lectus et massa scelerisque ultricies. Suspendisse potenti. Cras eleifend turpis vel erat dignissim rutrum.

    p Aliquam vulputate diam eget tortor lacinia elementum. Nam eu auctor augue. Aliquam quis nisi dolor. Nullam eu tristique orci, quis pharetra magna. Ut vitae velit maximus, sollicitudin dui eget, fermentum tortor. Suspendisse pretium felis a pellentesque vestibulum. Curabitur metus nibh, cursus id felis ut, ullamcorper dignissim ante. Phasellus vulputate ac lacus et dictum. Proin nec justo odio. Fusce pulvinar enim non orci varius, nec mollis tortor aliquet. Phasellus nec neque faucibus urna mattis egestas. Sed at cursus diam, id viverra nibh. Aliquam pellentesque nibh in est vulputate ultrices. Aliquam ullamcorper libero non consectetur fringilla. Etiam convallis, orci nec eleifend tincidunt, elit nibh tincidunt quam, sed elementum ex ligula in quam. Vestibulum convallis dolor leo, a vulputate nulla molestie vel.
              
            
!

CSS

              
                aside {
  background-color: lightgrey;
  position: fixed;
  max-height: 100vh;
  width: 25%;
  display: flex;
  flex-direction: column;
}

ul {
  overflow-y: auto;
  margin: 0;
  padding: 0;
}

section {
  margin-left: 26%;
}
              
            
!

JS

              
                
              
            
!
999px

Console