css遇到的坑（一）

持续更新，前提拖延症痊愈…:-)

1. less中使用calc

height: calc(~'100% - 20px');

2. 父元素使用transform子元素position:fixed失效

应该避免此场景发生，考虑其他的办法

3. 父元素flex后子元素height:100%失效

解决方法：

.grandparent {
    display: flex;
}
.parent {
    flex: auto;
    position: relative;
}
.child {
    width: 100%;
    height: 100%;
    position: absolute;
}

<div class='grandparent'>
    <div class='parent'></div>
     <div class='parent'>
         <div class='child'></div>
     </div>
</div>