Columns with 1 pixel height

Question

I am using the Gumby framework grid and am having a problem with the columns. I have the following code:

<div class="row appointment-container"> 
    <div class="columns one">
        <img class="appt-calendar" src="appt.png">
    </div>

    <div class="columns eight">
        <div id="last-appointment">
            <h4 class="confirm-appointment next-block">
                <span class="appt-text">Lorem ipsum intellectus testus integer string float test test test</span>
            </h4>
        </div>
    </div>

    <div class="columns three">
    </div>
</div>

With the following SCSS:

.appointment-container {

  position: relative;

  .appt-calendar {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}

The "columns eight" and "columns three" display correctly but the "columns one" has a height of only one pixel despite having content in it. What would cause this to happen?

Answer 1

It seems that

position:absolute

on the image caused the column to collapse to 1 pixel. I do not know if this is something only Gumby has or if other frameworks have the same framework but I will update this answer once I find out.