我目前正在对一行具有固定宽度的元素使用 flex 和 flex-direction row,这会导致溢出和水平滚动条,这正是我正在寻找的。p>
但是,我需要这些行中的第一列是全 Angular 的,而其余元素则在水平滚动条下流动。这就是我不能使用 wrap 的原因。
这是页面:http://dkrasniy.com/open-enroll/scrollable.html
注意:全 Angular 标题只应出现在移动视口(viewport)上。
在“日历年免赔额”下有行标题“个人”和“家庭”。这些是在移动设备上需要全宽的内容。
谢谢
最佳答案
澄清后编辑:
我相信您要求的是 flex 容器中的所有 sibling ,除了第一个在一行上。这个问题是 flex-wrap 总是在父/包含元素上,所以除非你将非行标题元素包装在另一个容器中,否则我看不到使用 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 中删除 left:0
- 添加最大宽度:100vw;溢出-x:滚动; .flex-row
关于javascript - Flexbox 换行仅第一列带有溢出滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49944425/