Question

我目前正在使用flex和flex-direction行来处理一行具有固定宽度的项目，这会导致溢出和水平滚动条，这正是我要找的。

但是，我需要这些行中的第一列为全宽，而其余项目则使用水平滚动。这就是为什么我不能使用wrap。

以下是页面：http://dkrasniy.com/open-enroll/scrollable.html

注意：全角标题应仅在移动视口上。

在＆＃34;日历年度免赔额＆＃34;行标题＆＃34;个人＆＃34; ＆安培; ＆＃34;家庭＆＃34 ;.这些是在移动设备上需要全宽的那些。

谢谢

Answer 1

澄清后编辑：

我相信你要求的是灵活容器内的所有兄弟姐妹，除了第一个在一条线上。这个问题是flex-wrap总是在父/包含元素上，所以除非你将非rowheader元素包装在另一个容器中，否则我看不到使用flexbox实现这一点的方法。

你可以像这样添加一个包装器，然后在下面添加css：

.flex-row {
  flex-wrap: wrap;
}
.innerrow {
  display: flex;
  flex: 100%;
  overflow-x: scroll;
  max-width: 100vw;
}

<div role="row" class="d-flex flex-row compare-container">

                <div role="rowheader" class="col-3 single-row-label">Individual</div>
                <div class="innerrow">
                  <div role="cell" class="col-3 plan-col _1 data-point">$0</div>
                  <div role="cell" class="col-3 plan-col _2 data-point">$0</div>
                  <div role="cell" class="col-3 plan-col _3 data-point">$10</div>
                  <div role="cell" class="col-3 plan-col _4 data-point">$25</div>
                  <div role="cell" class="col-3 plan-col _5 data-point">$25</div>
                </div>
            </div>

原件：

没有jsbin这是我的建议（在你需要的任何媒体查询中）：

从.single-row-label
添加最大宽度：100vw; overflow-x：scroll;到.flex-row

仅使用溢出滚动

1 个答案: