Столбцы высотой 1 пиксель

Question

Я использую сетку Gumby и у меня возникли проблемы со столбцами. У меня есть следующий код:

<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>

Со следующим SCSS:

.appointment-container {

  position: relative;

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

"Столбцы восемь" и "столбцы три" отображаются правильно, но "столбцы один" имеют высоту всего один пиксель, несмотря на наличие в них содержимого. Что может вызвать это?

Answer 1

Кажется, что

позиция: абсолютная

на изображении колонка свернулась до 1 пикселя. Я не знаю, является ли это чем-то, что есть только у Gumby, или же у других фреймворков есть такая же структура, но я уточню этот ответ, как только узнаю.