使用flexbox的响应表

Question

我正在设计一个有桌子的页面。在响应式屏幕中，我希望表格可以水平滚动，所以我使用了bootstraps .table-responsive类。由于应用于其部分的flex，表响应不起作用。

我的代码如下：

<header class="page-header"></header>
<section class="page-content">
   <div class="container">
      //Table Style here
   <div>
</section>
<footer class="page-footer"></footer>

CSS：

.page-content{
    flex: 1 0 auto;
    display: flex;
}

当我删除显示flex时，它工作正常。 我该怎么做才能克服这个问题？

Answer 1

我只是添加了

display:block;

在媒体查询页面内容。