CSS如何清除flex布局(如何让absolute获得子元素高度)

Question

问题描述

案例复现: 项目的基础布局采用flex,现在使用antd的table(zent的grid), 让grid表格变成可滚动状态(scroll),会因为flex布局,导致宽度被撑开.

于是就用absolute清除flex布局

position: absolute!important;
top: 0;
left: 0;
right: 0;
bottom: 0;

宽度问题解决了。但是现在absolute层的高度为0.我只能在其父级设置一个min-height, 但是子元素的高度是无限增长的.父级根本没法写死。虽然知道需要给absolute设置一个高度是很笨的做法,但是实在想不出有什么办法能解决第一个问题.

__

用图解释一下:grid-1元素里面有脱离文档流的grid-2,grid-3里面有正常的grid表
现在grid-1只能通过设置min-height来呈现内容,否则height一直为0,但是grid-3的高度是无限增长的,有什么办法可以让grid-1获取grid-3高度或者设置为滚动吗？(React项目)

谢谢！

Answer 1

可以换个思路，用定位解决这种问题个人感觉会越来越麻烦。可以给你想控制的元素包一个盒子 盒子flex里边就不用flex了 这样既不用flex也不用定位解决