Making a fixed Css lightbox content scrollable

Question

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.

I've seen this question: Scroll part of content in fixed position container, but it didn't work when I added the solution to my code. I also saw this one: How to make a "Fixed" element Scrollable, but I'd prefer not to use JavaScript in my code.

The code I have is this:

HTML

<!-- Lightbox usage markup -->
                <ul>
                    <li class="" id="portfolio_item">
                        <!-- thumbnail image wrapped in a link -->
                        <a href="#img1">
                            <img src="images/Templates/template_01/Template_01_thumb.png" width=""  height="150px">
                        </a>
                    </li>
                </ul>
                <!-- lightbox container hidden with CSS -->
                <a href="#_" class="lightbox" id="img1">
                    <img src="images/Templates/template_01/Template_01.png" class="lightbox_content">
                </a>

CSS

    /*************************************
 * 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;
}

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.

Update: I changed the CSS to this:

    .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;
}

But it still doesn't scroll.

Answer 1

See comments at bottom of CSS code for explanations:

/*************************************
 * 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;
}

/*========== ADDED THIS ==========*/
.lightbox {
    width: 300px; /* set arbitrary dimensions */
    height: 300px;
    overflow: scroll; /* causes .lightbox to be scrollable if children overflow it */
}

.lightbox img {
    max-width: none; /* max-width: 90%; <---- don't set this (otherwise image will never overflow parent)*/
    margin-top: 2%;
    overflow-y: visible; /* overflow-y: scroll; <---- don't set this (images can't contain anythying, so nothing can overflow from them*/
    height: auto;  /* height: 100%; <---- don't set this (otherwise image will never overflow parent)*/
}  

<!-- Lightbox usage markup -->
                <ul>
                    <li class="" id="portfolio_item">
                        <!-- thumbnail image wrapped in a link -->
                        <a href="#img1">
                            <img src="http://www.lorempixel.com/600/600" width=""  height="150px">
                        </a>
                    </li>
                </ul>
                <!-- lightbox container hidden with CSS -->
                <a href="#_" class="lightbox" id="img1">
                    <img src="http://www.lorempixel.com/600/600" class="lightbox_content">
                </a>

Answer 2

How about you set min-width and/or min-height to the image CSS rule, and then use the force overflow to set a scroll if the minimum image size is larger than the lightbox display size?

So what happens is the image is scaled to 90% of the lightbox container, but it will still be equal or greater than min-width which means the image size is set as this, and can then scroll with the scrollbar CSS rules you already have.

You might need to set these (min-width) rules as !important, too.