title: Making a fixed Css lightbox content scrollable
body: <p>I have a css lightbox for a image gallery, and the images that open in the lightbox must be big so that their content is easy to read. The lightbox container is fixed, but I need the images to be scroll-able on the y axis.</p>
  
  <p>I've seen this question: <a href="https://stackoverflow.com/questions/10154250/scroll-part-of-content-in-fixed-position-container">Scroll part of content in fixed position container</a>, but it didn't work when I added the solution to my code. I also saw this one: <a href="https://stackoverflow.com/questions/9383906/how-to-make-a-fixed-element-scrollable">How to make a &quot;Fixed&quot; element Scrollable</a>,  but I'd prefer not to use JavaScript in my code.</p>
  
  <p>The code I have is this:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!-- Lightbox usage markup --&gt;
                  &lt;ul&gt;
                      &lt;li class="" id="portfolio_item"&gt;
                          &lt;!-- thumbnail image wrapped in a link --&gt;
                          &lt;a href="#img1"&gt;
                              &lt;img src="images/Templates/template_01/Template_01_thumb.png" width=""  height="150px"&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;!-- lightbox container hidden with CSS --&gt;
                  &lt;a href="#_" class="lightbox" id="img1"&gt;
                      &lt;img src="images/Templates/template_01/Template_01.png" class="lightbox_content"&gt;
                  &lt;/a&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    /*************************************
   * Basic lightbox styles. Notice the
   * default 'display' is 'none'.
   */
  
  .lightbox {
    /** Hide the lightbox */
    display: none;
  
    /** Apply basic lightbox styling */
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: auto;
    padding:10px;
    text-align: center;
    top: 0;
    left: 0;
    background: black;
    background: rgba(0,0,0,0.8);
  }
  
  .lightbox img {
    /** Pad the lightbox image */
    max-width: 90%;
    margin-top: 2%;
    overflow-y:scroll;
    height:100%;
  }
  
  .lightbox:target {
    /** Show lightbox when it is target */
    display: block;
  
    /** Remove default browser outline style */
    outline: none;
  }
  </code></pre>
  
  <p>I realize it must be something simple, but I tried everything I could think of but it still doesn't work. Thanks for the help. </p>
  
  <p>Update:
  I changed the CSS to this:</p>
  
  <pre><code>    .lightbox {
    /** Hide the lightbox */
    display: none;
  
    /** Apply basic lightbox styling */
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: auto;
    padding:10px;
    text-align: center;
    top: 0;
    left: 0;
    background: black;
    background: rgba(0,0,0,0.8);
  }
  
  .lightbox_content{
    /** Pad the lightbox image */
    max-width: 90%;
    width:auto;
    min-width:30%;
    margin-top: 2%;
    overflow-y:scroll;
    max-height:10000px;
    height:3623px; 
  
  }
  
  .lightbox:target {
    /** Show lightbox when it is target */
    display: block;
  
    /** Remove default browser outline style */
    outline: none;
  }
  </code></pre>
  
  <p>But it still doesn't scroll.</p>