Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <body ng-app="MyApp" layout="row" ng-cloak>

 <md-sidenav layout="column" class="sidenav1" md-is-locked-open='true'>
   SideNav
   </md-sidenav>
  <div flex style="background: red" layout="column">
    <md-toolbar></md-toolbar>
    <div layout="row" flex style="background: #fff">
      <div layout="column" style="background: rebeccapurple" flex>
        <md-content flex>
          **Only this should be scrollable**
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo vel vitae enim sapiente tempora animi ad iste tempore et consequuntur architecto, nostrum pariatur harum vero praesentium explicabo. Consequatur, sequi, qui.</div>
          <div>Adipisci repellat minima doloremque, velit, harum itaque esse iusto dolor optio totam, laudantium eum officia non accusantium voluptas! Neque nesciunt facilis voluptates, veritatis fugiat vel placeat delectus pariatur quae corporis.</div>
          <div>Possimus mollitia ducimus, ullam explicabo suscipit! Dicta similique a eos officiis ea, soluta voluptatem facilis. Sit quia beatae molestiae aliquid cumque modi earum voluptate, impedit numquam ducimus aperiam distinctio. Laudantium.</div>
          <div>Repellat veritatis, ratione expedita, illum impedit amet distinctio, quia numquam vero porro ipsum possimus debitis sit explicabo autem accusantium accusamus tenetur laborum iusto animi qui nemo dolore soluta voluptatum! Accusamus!</div>
          <div>Dicta accusantium veniam repudiandae voluptatibus saepe enim consectetur quod ipsum molestias nulla obcaecati nisi dolores accusamus odit eveniet dolore in eligendi illo dignissimos, quas quis culpa distinctio. Ea, dolorem, quaerat!</div>
          <div>Asperiores adipisci ratione, obcaecati mollitia modi, at excepturi veniam ipsa odio necessitatibus. Ipsum, consectetur, iste. Fugit autem voluptatum veritatis sapiente minus ipsa ratione. Error expedita porro ut, facilis, neque quibusdam.</div>
          <div>Dignissimos voluptates aperiam maiores. Autem reiciendis, quod quis hic, libero maxime ipsam quam nihil neque asperiores rem assumenda ex eius, debitis tempore eveniet odio veritatis animi ad commodi repudiandae nesciunt.</div>
          <div>A architecto, alias officiis id debitis repellendus, accusamus. Nulla veniam commodi ex omnis nobis recusandae quia odit. Delectus minima ipsa tempora quod. Eum officiis non facilis eligendi! Delectus quos, laboriosam!</div>
          <div>Quibusdam neque aspernatur illo est at perferendis sint expedita excepturi fugit nihil iure, debitis qui nulla, ab laboriosam optio quidem commodi molestias sequi dolorum nam harum necessitatibus dolore! Veniam, non.</div>
          <div>Totam ab nobis quasi nostrum distinctio rerum, mollitia temporibus aperiam minus quisquam! Accusamus temporibus sint aliquid dignissimos rem necessitatibus, consequatur iure mollitia, minima ratione commodi! Soluta aut dolores mollitia nam.</div>
          <div>Laboriosam culpa aliquam non dicta deserunt, itaque ducimus velit. Assumenda quidem commodi, aliquid cum iusto maiores. Voluptates consectetur corporis, neque velit ea distinctio. Voluptatibus eos, tempora delectus incidunt nam amet.</div>
          <div>Delectus quos soluta ab amet dignissimos eveniet. Culpa rem delectus quaerat reprehenderit eligendi officiis harum odit id voluptatum voluptas ad, quis, magni architecto facere dolores sapiente optio asperiores. Exercitationem, est.</div>
          <div>Quisquam quod sequi provident soluta possimus, molestiae. Veniam eos impedit voluptatum asperiores reiciendis est, ex repudiandae sint minus animi sed eveniet fugit dolorum aut aspernatur, recusandae officiis itaque velit. Voluptatum.</div>
          <div>Repellat error pariatur atque eum vero doloribus explicabo officiis numquam ea facere ipsam tenetur laboriosam aperiam magni eligendi, quo quaerat. Illum ab reprehenderit omnis veniam sed veritatis unde dolore nobis.</div>
          <div>Architecto, nesciunt. Quae labore tempora tenetur hic, commodi accusantium, eveniet perferendis ratione saepe, ea facilis neque quam harum rerum. Ullam unde fuga quod temporibus dignissimos itaque eligendi nesciunt sequi voluptates.</div>
          <div>Velit consectetur officiis sunt soluta tempora earum non veritatis necessitatibus possimus sapiente amet impedit delectus expedita quidem commodi, quisquam quibusdam vitae. Autem, eveniet velit eligendi, omnis atque nihil voluptates sed.</div>
          <div>Laborum nobis, voluptatum. Molestiae porro enim voluptate ab quis fuga assumenda, optio reiciendis omnis fugiat, aspernatur deserunt nobis cum in magni soluta pariatur ratione repudiandae. Vel asperiores enim minima, debitis.</div>
          <div>Beatae, asperiores suscipit. Obcaecati deleniti placeat nemo fuga pariatur repudiandae, deserunt nulla laborum iure ut expedita voluptate itaque earum, suscipit mollitia quas totam, porro at velit sed dicta libero rem.</div>
          <div>Similique reprehenderit fugiat minus, repellat quam, doloribus cum molestias rem magnam. Asperiores perferendis quia omnis, consequatur et voluptatem fuga iure, neque voluptas eos natus cumque cum nostrum ea vitae. Molestiae.</div>
          <div>Sint at earum, beatae ad dolorum excepturi placeat totam hic, nam voluptatem deleniti consequuntur commodi, omnis dolores rerum tempore aliquid, iusto ex. Minima repellendus, incidunt explicabo officia, corporis atque ullam!</div>
          <div>Totam, asperiores! Modi dolorem totam vero enim, rem voluptate eius deleniti aspernatur labore nihil, impedit quisquam laboriosam qui. Labore nemo debitis placeat tempore id nobis magnam quam ipsam esse officia.</div>
          <div>Aliquam commodi aspernatur tempora, dignissimos est doloremque sint totam doloribus ullam, iure eum quibusdam repellat obcaecati repudiandae fugiat. Maxime sit harum quibusdam laudantium, ipsa laborum officiis eius veniam? Voluptate, delectus!</div>
          <div>Totam, debitis, maxime cum, quas quaerat quidem excepturi sapiente obcaecati ab repellendus tempore dignissimos placeat enim. Voluptates est quidem eligendi quae incidunt, amet accusamus ex unde nemo, quis doloribus consectetur.</div>
          <div>Unde ipsum iusto atque pariatur beatae libero, excepturi, facilis praesentium architecto cupiditate cumque laboriosam. Inventore sapiente necessitatibus corporis aliquid dolorum, natus assumenda provident modi. Eligendi dolores corporis quibusdam culpa nihil.</div>
          <div>Libero voluptates illum suscipit nisi, atque praesentium, aut adipisci quidem aliquam minus, ipsam, quaerat quisquam vero iste obcaecati cumque dolor nostrum id. Maxime eum, praesentium dolor quo? Quod, voluptates, tempore.</div>
          <div>Minus ea a, laboriosam beatae? Corporis ut, illo, eveniet doloremque ab sint itaque rerum vitae quisquam, consectetur voluptatum. Aliquid placeat repudiandae vel aliquam esse laborum, labore obcaecati amet ex reprehenderit?</div>
          <div>Eligendi mollitia voluptas a, voluptatibus sed sit eos expedita incidunt hic in? Possimus doloremque adipisci fuga esse cumque, atque eos deleniti aut minima, totam aperiam iure accusamus perferendis animi unde!</div>
          <div>Commodi, vitae hic adipisci cum, ut eius ipsum. Fuga itaque numquam, obcaecati! Dolorem, aut quos sequi ad sed aliquam quo iste quasi? Ipsa, vel odio fugit illum debitis, quis distinctio!</div>
          <div>Dolore fugit, sapiente praesentium. Error eligendi, natus mollitia minima ab amet optio maxime fugit quis porro, nesciunt ea ratione ut in dolorum quos. Aliquid, soluta facere illo? Esse, placeat, fugit!</div>
          <div>Ab perspiciatis architecto illo ipsum rem placeat facere eius tenetur laudantium? Exercitationem, molestias! Harum illum voluptatum, unde, repellat ullam magnam perferendis dolorem accusantium alias, vitae repellendus rem debitis, cumque sunt.</div>
          <div>Sint et, odit, nam in quos enim vero fuga possimus quidem assumenda reiciendis reprehenderit consequatur, qui minus? Enim quia sint voluptatibus consequatur animi eius minima expedita pariatur. Earum, quisquam, delectus?</div>
          <div>Officiis delectus optio porro dolor recusandae natus vero esse impedit tempore nostrum sunt quia autem perspiciatis magni, eligendi accusantium, maiores quod, facere mollitia distinctio. Doloremque voluptatibus, consequatur neque dolores impedit.</div>
          <div>Laborum ullam reprehenderit sequi atque porro minima quos, voluptatem facilis non nihil nesciunt, repudiandae nulla rerum voluptas quibusdam ex accusamus quis mollitia recusandae cum deserunt suscipit, fuga provident. Earum, amet!</div>
          <div>Mollitia in eum accusantium quia laboriosam culpa dolorum hic sequi! Accusantium omnis explicabo sint laudantium assumenda voluptatum nulla odit. Ab ipsa nemo ratione, ea, eum rerum delectus minus eius voluptatibus.</div>
          <div>Nostrum provident impedit, quibusdam nam, ex, et odio odit omnis quod cumque perspiciatis tempora eos beatae eligendi quae consequatur optio itaque recusandae assumenda incidunt nisi. Quas dicta velit porro officia.</div>
          <div>Fugit at dolorem consequuntur vitae. Tempora deleniti labore, sit numquam minus, culpa debitis obcaecati! Veniam tenetur voluptatibus id accusamus nihil, reiciendis aliquam. Minus deserunt eveniet ipsam, voluptatum ex reiciendis doloremque.</div>
          <div>Tenetur, nemo nisi temporibus, incidunt eum tempore dolores ut recusandae voluptatum, consequatur, vero beatae molestiae aliquid modi praesentium. Optio at ex accusantium, voluptas consectetur aliquid autem! Veritatis dolorum quod, sunt.</div>
          <div>Ab non deleniti, mollitia maiores minus, excepturi hic eius fuga itaque sequi distinctio dicta aliquam voluptatem, quisquam ipsa. Maiores est odit dolore et. Debitis illum doloribus provident molestiae mollitia suscipit.</div>
          <div>Cum dolorum explicabo dolor ipsum, ad debitis laudantium at quod odit vero consequuntur quisquam inventore labore, distinctio reprehenderit soluta quidem accusamus rerum odio repellendus illo. Ex nesciunt deserunt, est officiis!</div>
          <div>Non, voluptate, suscipit! Expedita adipisci repellat maxime alias laborum a! Deserunt, similique! Consequatur repellendus blanditiis voluptatibus hic eum. Asperiores laboriosam explicabo perferendis unde ad, sit animi earum voluptatem impedit perspiciatis.</div>
        </md-content>
      </div>
      <md-sidenav md-component-id="right" md-is-locked-open="$mdMedia('min-width: 333px')" class="md-sidenav-right" style="background: green">
      **And this should fill vertically**
      </md-sidenav>
    </div>
  </div>
</body>

<!-- <md-content flex layout="column">
    <ng-view>
      View Content
    </ng-view>
  </md-content> -->
            
          
!
            
                  md-sidenav  {
      width: 110px;height:100%;
      padding:20px;
      background-color: #6bc7cc;
    }

    md-content {
      background-color : tan;
      height:100%;
      padding:20px;
    }


            
          
!
            
              
angular.module('MyApp', ['ngMaterial']);
 

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console