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

Question

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

如果您更改视口的高度，高度会上升，但不会下降。我认为既然它可以增加，它应该也可以减少，但事实并非如此。

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

$(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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child">
    <div id="grandchild">Grandchild</div>
  </div>
</div>

Answer 1

那是因为“#grandchild”有一个硬编码的高度，去掉硬编码的高度，它会根据可用的高度自行调整。