CodePen

HTML

            
              <header class="main_head">
    	<h1>Header</h1>

</header>
<div class="column article_column">
    <h2>Title</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, blanditiis, iusto eaque error ullam maiores magnam assumenda autem maxime modi tempora nostrum aspernatur perspiciatis dolorum harum soluta inventore non. Eligendi, quo, porro, labore temporibus necessitatibus dicta reiciendis vero quam tempore sint dignissimos explicabo nostrum dolore ipsa nam eos enim facere unde! Laborum, veniam, qui, soluta delectus nulla in ipsam consequatur molestiae temporibus illo optio excepturi aliquid numquam asperiores quidem enim laboriosam sunt ratione iure magnam dicta nobis animi expedita ea natus culpa illum perspiciatis? Veritatis, impedit, omnis, reiciendis, porro nam deserunt unde hic excepturi repellendus quisquam quas iusto voluptatibus ad quidem commodi consequatur possimus. Veniam, ipsa, nisi, tenetur facilis delectus quisquam vero perspiciatis natus obcaecati reprehenderit expedita fugiat dolores aperiam voluptas pariatur autem velit illum sapiente porro ea laborum a soluta architecto suscipit ratione repudiandae ducimus id odio quae voluptates molestiae perferendis dolor temporibus. Dolore, voluptatibus, nobis molestias quas doloremque impedit suscipit. Explicabo, fugiat, perferendis molestias cupiditate saepe repellat voluptate tenetur enim odit eius neque laudantium aut sint molestiae nulla ipsam unde nostrum dolores vel aperiam eveniet magnam nobis totam. Explicabo, quos, animi, quod ad cumque modi consectetur non at possimus voluptates ducimus voluptas suscipit molestiae esse commodi distinctio dolorem vel facilis doloremque laudantium veniam facere nisi nesciunt perferendis excepturi? Maiores, enim officiis delectus vitae earum voluptates eveniet laborum voluptatum facere est. Ipsam, numquam, magni, voluptas, laboriosam atque tenetur labore quos harum dolor totam odit cumque excepturi blanditiis nulla eius fugiat et vero nostrum veritatis velit minus? Officia, dicta facere commodi expedita libero debitis doloremque rerum aspernatur dolorem hic aliquid nobis repellendus eligendi magni illo labore saepe at enim placeat explicabo voluptatum temporibus consequuntur molestias vero deleniti sequi minus pariatur sunt repudiandae exercitationem fugit minima excepturi nesciunt animi maiores voluptatem vel ducimus ipsam quas ut et delectus. Quo, architecto, nesciunt, cumque adipisci deserunt recusandae mollitia id veniam voluptate voluptatibus ullam non optio eaque voluptates doloribus quas sit ad eligendi cum nulla! Iste, dignissimos, aspernatur, inventore, reiciendis optio molestiae nam consequatur nostrum sapiente totam officiis ipsa nesciunt dolore quasi sunt cumque ratione cum sequi! Totam, magnam, unde, tempora beatae inventore culpa tempore nobis delectus repellendus nesciunt neque placeat quidem adipisci pariatur expedita harum suscipit facilis error aspernatur dolore. Dolores, facilis, odio similique dolore magni recusandae vel illum optio omnis ipsam repellendus officiis voluptatum voluptatem enim accusamus ratione ad eum accusantium nisi nulla autem deleniti alias harum odit quas error delectus ipsum. Cum, enim sed quos expedita odio mollitia ex voluptates rem ad maiores. Perferendis, a, totam, nihil laudantium ea quam repellendus distinctio suscipit temporibus quod reiciendis nobis mollitia enim non libero tempora facere quibusdam! Dolore, necessitatibus, quaerat illum consequatur harum unde nobis blanditiis optio magni placeat adipisci maiores error eaque doloremque nulla possimus magnam dignissimos totam consequuntur laborum incidunt quas ducimus veritatis excepturi ad! Voluptate odio neque repellat. Dignissimos, nam, maxime, culpa, rem omnis officiis iusto iure suscipit quas aliquid vel eum praesentium ducimus repudiandae quos commodi nulla! Et, libero, fugiat, necessitatibus rem exercitationem nobis quam excepturi aperiam ipsum sapiente inventore quidem non illo aut iusto laboriosam harum mollitia aliquam deserunt ratione debitis adipisci alias ipsam animi tempora ullam commodi consequatur consectetur perferendis facere. Commodi, reiciendis, ipsam, quaerat error repellat maiores odit dolorum aperiam impedit soluta id natus dicta alias tempore praesentium illo magni molestiae laborum totam harum sapiente unde incidunt libero a temporibus aliquam nihil nesciunt. Tenetur, porro, impedit, aspernatur doloremque veniam at molestiae culpa deleniti excepturi ducimus blanditiis ipsum necessitatibus accusamus. Quod sed velit quisquam minus cumque. Amet, fuga, hic, eos, veritatis beatae rem inventore omnis adipisci laudantium officia tenetur consequuntur fugit aliquid ipsam eligendi voluptatem esse reprehenderit ea pariatur a minus sequi sunt unde neque cum saepe est similique eum perferendis? Aspernatur, enim nam asperiores non amet quo molestiae ipsum ducimus culpa mollitia corporis officia ullam reprehenderit illo corrupti facere repellat praesentium at animi adipisci accusamus cumque doloribus nihil! Nesciunt, totam, laboriosam culpa obcaecati et voluptates iure reprehenderit harum minus iste at dignissimos fugit porro aut perferendis distinctio itaque cumque consectetur. Necessitatibus, et, corrupti rerum sapiente quaerat architecto nostrum ut voluptatum id excepturi soluta totam sunt illum consequatur nulla doloremque at hic sequi nam consectetur nisi facere ipsum nihil quam sed ipsam inventore suscipit itaque earum officiis? Vel, sit, nemo consequatur temporibus inventore perferendis aspernatur magnam molestias nostrum nesciunt recusandae aperiam amet facilis est corporis aut rem optio laudantium consectetur assumenda dolores error nisi odit et provident repudiandae delectus sapiente at asperiores porro similique fugit dolore in quasi reprehenderit quisquam ratione. Ex, exercitationem, natus ipsum quae laudantium deleniti ab. Sequi, amet possimus voluptatum perspiciatis placeat ipsam iste? Dicta, sapiente delectus aut sint incidunt mollitia nemo omnis sit debitis. Similique, consequuntur, necessitatibus, aspernatur, fugit doloremque recusandae tempore assumenda voluptas possimus eum voluptatibus qui nisi repudiandae deleniti libero maiores aut magnam nam cum aliquid doloribus at veniam neque dignissimos minus vero sed voluptate commodi dolore delectus inventore ipsa quaerat quo. Deserunt maxime similique mollitia at accusantium obcaecati dicta excepturi! Earum, provident, beatae, quidem aspernatur eius sequi veniam id recusandae perferendis asperiores perspiciatis omnis quae aliquid non illum doloremque nisi eos distinctio? Ex, nobis, assumenda consectetur eveniet sint reprehenderit suscipit ipsa veritatis earum rem amet doloremque saepe rerum. Esse, eveniet provident voluptates nam neque quidem ad illum sequi molestias mollitia reprehenderit temporibus fugit explicabo dolore repellat iusto sapiente asperiores ratione ullam consequuntur rem repudiandae vero quae iure quia unde quos ipsam porro soluta maiores excepturi nihil debitis repellendus accusantium hic perferendis laudantium! Recusandae, accusantium, ducimus, repellendus possimus eligendi laboriosam facilis hic at sint voluptate architecto neque excepturi natus voluptatibus officia nam eum. Perferendis, at, odio, quis, tempore est eum consectetur adipisci animi qui sit libero voluptate ad! Laboriosam, possimus perspiciatis facere vel sunt temporibus aspernatur voluptates accusantium corrupti quisquam. Magni, necessitatibus illo deserunt pariatur ex recusandae officiis dolore temporibus culpa dolores provident tempora quas excepturi mollitia incidunt odit modi a nostrum esse est doloribus id praesentium aliquam numquam eos explicabo quisquam laudantium corporis aliquid veniam fugit nihil libero molestiae! Quibusdam, sunt, quam, nisi voluptatum commodi suscipit amet ea in minus recusandae dolorum cupiditate facilis facere laudantium veniam sint iure soluta quis vel voluptates adipisci qui sapiente dignissimos placeat rem voluptatem quia officiis ratione voluptas! Qui, architecto aperiam vel ipsa nobis aliquid rem! Iure, mollitia, quae, praesentium veniam ad reprehenderit eligendi placeat quis error sequi assumenda doloribus libero perferendis temporibus nam molestiae cupiditate sapiente porro fugiat eum! Quidem, rem, esse, debitis, voluptatibus velit sunt laborum fugit aspernatur fugiat a architecto quas molestiae veritatis dolorem cumque deserunt obcaecati illum odio harum ratione ad accusantium minima ab dolore enim doloremque earum nobis nesciunt unde modi ipsa aliquam accusamus non cupiditate eaque totam vero labore doloribus vitae deleniti eligendi voluptatem? Facere, ut, dolores, repellat delectus quae quo fugiat repellendus aut ratione adipisci at consectetur doloremque vitae earum dolorem nulla atque aperiam maiores tempore inventore optio cumque libero consequatur nisi commodi deserunt voluptas fugit voluptate dicta recusandae.</div>
<div class="column article_column">
    <h2>Title</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, ut, obcaecati, possimus, facere deserunt voluptas pariatur excepturi quidem placeat recusandae aliquid commodi tenetur ullam officia doloribus error distinctio qui sint consequuntur nihil voluptatum aliquam quibusdam magnam minima dolores a quasi maiores unde nostrum architecto molestiae eligendi quam eaque dolor tempore aperiam labore debitis eum laborum delectus quae deleniti voluptatibus praesentium id sapiente rem incidunt enim itaque tempora quas! Non, hic, consectetur, exercitationem minus quis praesentium enim repellat culpa nam odit eveniet animi quae dolore quidem voluptatibus officiis aliquid dolor saepe sit iusto eos eum ut illo consequatur cum magni ea quam est ducimus officia qui id voluptates veritatis! Placeat, molestias ipsam rerum magni. Velit, repellat nesciunt eaque assumenda accusamus voluptatibus mollitia quis sunt porro asperiores adipisci ducimus iure fugiat suscipit eum quae aspernatur ad impedit laudantium tempora! Dolores, aut, nam laborum dicta pariatur aperiam minus in? Tenetur sequi rerum nemo doloribus eaque quidem sint voluptatum hic eos ratione. Tenetur, sunt, modi libero placeat esse tempore ratione nesciunt fugit veritatis omnis quod odit vel sint labore quis unde molestiae rem nobis error sed corrupti ipsam numquam dolores similique officiis perferendis ad quo expedita quibusdam. Itaque, reprehenderit, illo at tempora doloribus alias. Optio, id, voluptatibus minima debitis provident aut tempora quidem nostrum libero doloremque error laboriosam repellendus illo blanditiis voluptates nemo similique non nisi dignissimos vitae fugiat perferendis accusamus nobis omnis veniam velit hic repudiandae eos sequi corporis sit temporibus nesciunt quae aliquam odit eligendi itaque ducimus officia fugit excepturi? Labore, veritatis, omnis, iusto, esse voluptates earum expedita officia perspiciatis magni sint odio voluptatum incidunt rem ipsa officiis veniam modi eaque sit quasi dolorem! Laboriosam deleniti qui omnis ipsa perspiciatis fugiat ducimus voluptas iusto! Hic, consequatur ipsum quaerat dolor adipisci rem nobis necessitatibus harum aliquid. Perferendis eligendi vitae hic suscipit minus illum?</div>
            
          
!

CSS

            
              * {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html, body {
    height:100%;
}
body {
    overflow-y:hidden;
    overflow-x:scroll;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    display: -moz-box; 
    -ms-flex-direction:row;
    -webkit-flex-flow:row;
    flex-flow:row;
}
.main_head {
    height:100%;
    width:350px;
    background: #f00;
}
.column {
    height:100%;
    padding:10px;
    width:auto;
}
.article_column {
    -webkit-column-width:500px;
    -moz-columns:500px;
    columns:500px;
    
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................