jQuery CSS高度增加但不会减少，Foundation，Flex

Question

这是一支笔：https://codepen.io/anon/pen/LBNyXP?editors=1111

如果更改视口的高度，则高度会增加，但绝不会降低。我认为，既然它可以增加，那么它也应该可以减少，但不能减少。

在“整页”模式下观看最佳：

componentName

$(document).ready(function() { 
  $(window).on('load resize', function() {
    var parentHeight = $('#parent').outerHeight();
    console.log('height', parentHeight);
    $('#grandchild').css('height', parentHeight);
  });
});

#parent {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
#parent #child {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

Answer 1

这是因为“ #grandchild”具有硬编码的高度，请删除硬编码的高度，它将根据可用的高度进行调整。