Flexbox line-break 行只有第一列有溢出滚动

Question

我目前正在对一行固定宽度的项目使用 flex 和 flex-direction row，这会导致溢出和水平滚动条，这正是我正在寻找的。

但是，我需要这些行中的第一列为 full-width，而其余项目则在水平滚动条下方流动。这就是为什么我不能使用 wrap.

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

注意： full-width 标题只能在移动视口上。

"Calendar Year Deductible" 下有行标题 "Individual" 和 "Family"。这些是在移动设备上需要全宽的内容。

谢谢

Answer 1

澄清后编辑：

我相信您要求的是 flex 容器中的所有兄弟姐妹，除了第一个在一行上。这个问题是 flex-wrap 总是在 parent/containing 元素上，所以除非你将 non-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">[=11=]</div>
                  <div role="cell" class="col-3 plan-col _2 data-point">[=11=]</div>
                  <div role="cell" class="col-3 plan-col _3 data-point"></div>
                  <div role="cell" class="col-3 plan-col _4 data-point"></div>
                  <div role="cell" class="col-3 plan-col _5 data-point"></div>
                </div>
            </div>

原文：

在没有 jsbin 的情况下，这是我建议您执行的操作（在您需要的任何媒体查询中）：

从 .single-row-label
添加max-width：100vw； overflow-x：滚动；到 .flex-row

Flexbox line-break 行只有第一列有溢出滚动

Flexbox line-break row only first column with overflow scroll

javascript

css

flexbox

css-grid

flexboxgrid