我在使用FlexBox布局内的表格在父FlexBox外部流血使页面宽度大于浏览器宽度时遇到了一些麻烦.这是一个模型,显示了我遇到的类似问题.
#flex { display:flex; display:-webkit-flex; flex-direction: row; } #one { background-color: black; width: 300px; flex-shrink: 0; -webkit-flex-shrink: 0; } #two { background-color:red; }
<div id="flex"> <div id="one">one </div> <div> <table> <tr> <td>First Row</td> <td>Second Row</td> <td>Third Row</td> <td>Fourth Row</td> <td>Fifth Row</td> <td>Sixth Row</td> <td>Seventh Row</td> <td>Eighth Row</td> <td>Ninth Row</td> <td>Tenth Row</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>DataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataData</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </table> </div> </div>
你可以看到即使.flex只是屏幕的宽度,.two也要宽得多.
我在第二个div中使用数据表,因此表格大小是动态的,即使设置了孩子的最大宽度和一切,我也无法让它停止流血.我需要帮助弄清楚如何锁定flexBox的第二个div以让表格正确调整大小(它有响应元素,但不会被使用b / c它只是变宽).
编辑:似乎表格正在完成页面的100%宽度,但由于左侧的元素,因此表格位于右侧的边距之外.
谢谢您的帮助.
解决方法
首先,设置身体:
body { width:100vw; height:100vh; margin: 0px; }
然后,让最大的容器#flex {max-width:100%;和你的桌子{word-break:break-all;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。