Flex grid

Flex-grid.markdown

Flex grid

A Pen by Ugo on CodePen.

License.

index.html

<div class="wrap"> 
  <main>
    <aside>
      <h1>Responsive Sidebar</h1>
			<a href="http://webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269">Plus d'infos ici</a>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla tempore rerum illum optio, iure consectetur quaerat facilis mollitia iste excepturi, voluptatum amet. Perferendis numquam consequuntur atque earum exercitationem harum delectus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloribus, iure nam necessitatibus eligendi tenetur quisquam nobis, quos adipisci accusantium aut. Reprehenderit ullam, doloribus soluta et, tempora laborum voluptatibus autem est quidem amet libero enim voluptatem iure quam quo rem, saepe tempore deleniti fugit voluptas, odio voluptates. Ab eum cumque quisquam rem dolores, repudiandae earum tenetur officiis voluptatibus at similique in, beatae voluptatum sit est nemo ea nihil velit animi officia ut assumenda illo. Distinctio necessitatibus fugit dignissimos provident! Distinctio, sit placeat, cum veritatis quaerat et, odit libero repudiandae corrupti magni esse odio quisquam reprehenderit dignissimos. At sapiente architecto dolorum praesentium commodi explicabo neque autem, itaque fugiat incidunt eaque voluptatem molestias perspiciatis, atque tenetur impedit, quaerat veniam beatae! Earum incidunt, fuga, suscipit quae voluptatem sed aut non labore dolorem exercitationem inventore in itaque vero neque. Quaerat in, veniam a! Quidem nam blanditiis, deserunt, vero sunt adipisci illo. Cupiditate ab voluptates nesciunt quisquam! Ipsa atque dolores earum voluptatum! Cum officia alias quidem velit, ut autem repellendus, unde at consequuntur debitis. Rem, mollitia eaque velit ex eligendi, omnis quasi, et itaque tempore quae sed voluptatum, perferendis incidunt amet illum at! Incidunt optio eos ducimus earum, necessitatibus mollitia doloribus reprehenderit, suscipit doloremque iste fugit quia nemo, nisi itaque! Numquam aut, fugiat rerum vitae debitis incidunt similique quod iste unde quasi excepturi ipsam adipisci labore nisi maxime quae deleniti, cupiditate. Excepturi eius neque quas voluptate, architecto, expedita, illum dolore dolorum iusto, saepe deserunt modi consequuntur placeat error enim beatae. Reiciendis, dignissimos. Nam tenetur ipsa totam aliquid deleniti velit dicta repellat minima fugiat, assumenda vero consequuntur unde consequatur architecto, explicabo. Odit, commodi, porro. Neque dolores voluptatibus eveniet. Itaque praesentium perferendis voluptate quos suscipit non dolor necessitatibus laborum amet. Quo, accusantium architecto nihil quidem laudantium atque, officia necessitatibus aut! Iusto provident itaque recusandae mollitia pariatur aspernatur quae, culpa quo impedit accusamus inventore enim earum nam quod dolore unde possimus nobis animi! Iure est dolores ratione sapiente ea voluptatem quia cum omnis perspiciatis a, fuga quisquam molestiae repellendus. Repudiandae dolore animi, aliquam sapiente eius, qui sit, illo rerum inventore necessitatibus blanditiis asperiores, perferendis commodi voluptatibus mollitia fugit corporis excepturi recusandae fuga libero temporibus sunt facilis magnam eligendi velit. Quibusdam, cumque, at. Reprehenderit repudiandae hic perspiciatis porro facere quibusdam. Animi adipisci ex fuga eos et, laborum aliquid, reprehenderit natus delectus quo ipsum sequi est soluta, voluptate velit, beatae eum vero id dolor provident perspiciatis optio dicta iste molestias eveniet! Dolorem labore veniam sint doloremque hic, quam error, optio nostrum placeat suscipit nam corporis ipsum ut quaerat ullam obcaecati aliquam voluptas! Dolorum, ipsa, officiis. Unde natus doloribus laborum voluptatem facere repudiandae voluptatibus neque reiciendis, expedita magnam ipsa sapiente esse enim dolores hic inventore, molestiae asperiores earum alias quaerat atque nisi minus eius quae eveniet. Beatae ea odio aliquam temporibus, libero quam id molestias nam minus, provident, repellat quaerat, rerum unde a sequi sed soluta impedit! Dolore fugit eos magni saepe inventore nam rem quas quibusdam nemo, animi nesciunt blanditiis sapiente vitae consequuntur voluptatibus sequi quia repellendus ipsum expedita assumenda perferendis, optio tenetur nisi? Consequatur ducimus, perferendis eum blanditiis repudiandae, libero laborum nisi veritatis ea facilis iusto fuga neque, nostrum veniam exercitationem? Saepe quaerat expedita architecto incidunt? Quod itaque ut quia! Ea quas mollitia quaerat alias consectetur magni, pariatur rem impedit doloribus, non ut officia ratione, dolor sint dolorum ipsam quia et facilis qui ex animi eaque minus repellat! Eos?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis laboriosam, eos magnam autem quis enim nihil. Quod molestiae est eligendi nesciunt, distinctio beatae nisi, animi, excepturi corporis illo, veritatis vero.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum ipsa excepturi, unde vel culpa dolorem quia. Soluta, nobis, aliquam. Corporis quaerat eos hic ex labore placeat et sequi in reiciendis.</p>
    </aside>
    <article>
      <h1>Responsive Content</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quasi quos laboriosam. Iste provident, qui non laudantium corporis rem, magnam eos optio, corrupti nemo eligendi quis consectetur quasi quos quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium voluptatem, nesciunt voluptatibus tenetur temporibus est optio possimus quasi ab eaque, ullam exercitationem. Asperiores totam officiis animi aliquid amet, officia voluptate nisi fugiat tempora enim neque accusamus itaque numquam veniam odit velit aspernatur dolor eius iure molestiae obcaecati a sunt laudantium ut. Illum fuga minus ducimus quidem voluptatem ipsa dignissimos exercitationem id rerum rem vero nesciunt et quam, sit delectus repellendus. Impedit aspernatur ullam minima similique atque, ad ab quis accusamus ex commodi cum quibusdam nihil explicabo in nam, rem exercitationem. Modi explicabo quasi blanditiis necessitatibus accusamus numquam magnam adipisci, doloribus, ex enim voluptatem laboriosam, nihil dolorum quos inventore sequi aliquid suscipit illum. Odio in perferendis sint, maiores soluta tenetur voluptatibus aut! Accusantium facilis accusamus vitae saepe numquam totam beatae maiores vel, illum suscipit tempora dolores deleniti aliquam voluptates tenetur quibusdam praesentium ipsum aperiam quam! Neque doloremque laudantium repudiandae temporibus similique dicta quas soluta voluptatum. Optio provident, dolorum quo iusto expedita. Unde iure quis qui omnis amet nisi architecto, totam iste placeat expedita eius quibusdam cupiditate inventore quae autem vitae aperiam debitis eveniet ipsum excepturi officia consequatur id laudantium! Deserunt maiores deleniti ipsum, quasi nam optio placeat corporis commodi dolorum dignissimos labore, ex harum, cum eius aspernatur! Molestias magnam, ab in? Incidunt deleniti tempora placeat voluptates, hic sapiente, quisquam aliquid nobis modi ex, ab beatae neque. Reiciendis culpa nam ipsum maiores explicabo cum in qui natus! Labore laborum similique unde praesentium minus accusamus quisquam adipisci doloremque reiciendis, temporibus quis alias culpa ratione sunt aut laboriosam assumenda architecto nobis atque voluptate, nisi cupiditate modi vitae illo! Sed in, voluptate dolorem, minima eius quibusdam esse voluptatem nesciunt ullam distinctio, saepe animi explicabo et architecto id eligendi earum sunt. Fugiat, consequatur similique cum expedita mollitia sed corporis, ut, eius in rem quasi est eum error magni asperiores quia facere quod, omnis minima recusandae impedit eaque doloribus necessitatibus minus nihil? Minus voluptate magni veniam doloribus ab debitis ut possimus, natus libero dolorum optio quo molestias, consectetur laborum. Perferendis doloremque eum iste aut suscipit. Qui dignissimos nulla quos quidem laboriosam beatae, porro rem perferendis quisquam libero facilis provident cum, tempora illum praesentium. Obcaecati, sapiente quam eveniet voluptatum facere ipsa nobis alias ipsam aut. Atque, consectetur, at? Dolor, atque explicabo, numquam eveniet necessitatibus sint labore maxime nobis inventore sit tempora aspernatur nam, omnis provident! Dolor fugiat similique doloremque, pariatur mollitia aliquam possimus exercitationem repudiandae quae. Praesentium impedit ullam voluptatibus ipsum nam possimus nesciunt magnam sint facere aperiam expedita ducimus quo accusantium omnis vel quaerat consectetur, non, corrupti reiciendis, neque maxime voluptatem! Consequatur praesentium aliquam earum accusantium possimus, labore reiciendis fugit atque laboriosam, neque distinctio odio alias omnis perspiciatis eveniet, libero cumque quia necessitatibus officiis, tenetur rem voluptatum dolorum excepturi sequi vel. Ad error illum quisquam dolorem saepe atque harum libero temporibus fugit excepturi odio cum pariatur, itaque quos, sapiente, aut quae tempore perferendis doloremque totam earum reiciendis soluta accusamus non! Corrupti officiis modi animi culpa labore nihil quisquam, at tenetur reprehenderit fugiat, tempora rerum, voluptas laborum cum corporis nam magnam non sint. Explicabo neque consequuntur, quibusdam, obcaecati odio inventore, minima reiciendis error adipisci maiores nostrum dolorem sapiente molestiae sequi assumenda recusandae officiis minus quam provident deleniti ipsa! Dolorem, cupiditate. Nihil accusamus repellendus suscipit, cum velit! Unde sed dolores similique, delectus explicabo, culpa quo. Aperiam, sint. Soluta accusantium vitae, ea ad deserunt totam repudiandae atque ducimus tempore laudantium!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio eaque veniam amet sint placeat, earum id illum suscipit vel magnam voluptates odio sit quae reprehenderit impedit nesciunt expedita delectus velit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore saepe eligendi, eos soluta qui, corrupti esse. Sint beatae totam perferendis, nemo deleniti voluptatibus, ratione, minus, corrupti recusandae tempore officia illo.</p>
    </article>
  </main>
</div>

style.css

html, body {
  height: 100%;
}
.wrap {
  /*Force la hauteur à se fixer à 100%*/
  height: 100vh;
  display: flex;
}
main {
  flex: 1;
  display: flex;
}
aside, article {
  overflow-y: scroll;
  padding: 2em;
}
aside {
  flex: 1;
}
article {
  flex: 2;
}
@media (max-width: 800px) {
  main {
    flex-direction: column;
  }
}