我正在处理水平放置列表的 ToDo-List。每个列表顶部都有一个标题,列表垂直溢出。
我有一个带有 y 滚动条的容器,而标题固定在顶部。此外,我可以水平添加新列表。当向右 x 滚动时,整个页面将滚动,因此标题与列表保持对齐。
问题:当我向右滚动以查看溢出时,滚动条没有扩展到占新子元素的新宽度,而是向左移动。容器的最大宽度保持在屏幕宽度(例如 1920 像素)。新的列表元素保持隐藏状态。
请看这个 fiddle 用于可视化。如您所见,滚动条位于 content 5
后面,而 content 6
和 content 7
隐藏。
我已经尝试了各种 css 属性,例如 float 和清除等。固定宽度不适合我。
唯一有效的是使用 Javascript/JQuery 动态计算新宽度,但是在更宽的列表容器上,y 滚动条对用户是隐藏的。我希望滚动条始终可见。
.header-wrapper {
display: flex;
background: whitesmoke;
text-align: center;
}
.lists-wrapper {
display: flex;
background: whitesmoke;
text-align: center;
overflow-y: scroll;
overflow-x: hidden;
height: 80%;
}
.header {
min-width: 200px;
border-bottom: 1px solid grey;
}
.list {
min-width: 200px;
border-right: 1px solid lightgrey;
border-bottom: 3px solid orange;
background: steelblue;
color: white;
height: 1000px;
}
.outer {
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: hidden;
overflow-x: scroll;
position: absolute;
}
<div class="outer">
<div class="header-wrapper">
<div class="header">
<span>Title 1</span>
</div>
<div class="header">
<span>Title 2</span>
</div>
<div class="header">
<span>Title 3</span>
</div>
<div class="header">
<span>Title 4</span>
</div>
<div class="header">
<span>Title 5</span>
</div>
<div class="header">
<span>Title 6</span>
</div>
<div class="header">
<span>Title 7</span>
</div>
</div>
<div class="lists-wrapper">
<div class="list">
content 1
</div>
<div class="list">
content 2
</div>
<div class="list">
content 3
</div>
<div class="list">
content 4
</div>
<div class="list">
content 5
</div>
<div class="list">
content 6
</div>
<div class="list">
content 7
</div>
</div>
</div>
最佳答案
您可以添加一个具有溢出内容宽度的额外包装器:
.header-wrapper {
display: flex;
background: whitesmoke;
text-align: center;
}
.lists-wrapper {
display: flex;
background: whitesmoke;
text-align: center;
overflow-y: scroll;
overflow-x: hidden;
height: 80%;
width: 100%;
}
.header {
min-width: 200px;
border-bottom: 1px solid grey;
}
.list {
min-width: 200px;
border-right: 1px solid lightgrey;
border-bottom: 3px solid orange;
background: steelblue;
color: white;
height: 1000px;
}
.outer {
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: hidden;
overflow-x: scroll;
position: absolute;
}
.intermediate {
display: inline-block; /* to make its width be the width of the content; */
height: 100%; /* to make the children percentage height still work */
vertical-align: top; /* to mitigate the possible artifacts of inline positioning */
}
<div class="outer">
<div class="intermediate">
<div class="header-wrapper">
<div class="header">
<span>Title 1</span>
</div>
<div class="header">
<span>Title 2</span>
</div>
<div class="header">
<span>Title 3</span>
</div>
<div class="header">
<span>Title 4</span>
</div>
<div class="header">
<span>Title 5</span>
</div>
<div class="header">
<span>Title 6</span>
</div>
<div class="header">
<span>Title 7</span>
</div>
</div>
<div class="lists-wrapper">
<div class="list">
content 1
</div>
<div class="list">
content 2
</div>
<div class="list">
content 3
</div>
<div class="list">
content 4
</div>
<div class="list">
content 5
</div>
<div class="list">
content 6
</div>
<div class="list">
content 7
</div>
</div>
</div>
</div>
关于javascript - 添加新子元素时,父容器仅将子元素包裹到屏幕边缘(首选 IE 11 支持),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51308852/