css - 高度为 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 才有的东西，还是其他框架也有相同的框架，但我会在发现后更新这个答案。