css - 具有水平滚动和固定宽度元素的 Flexbox
问题描述
我希望两者都.right
具有.button
固定宽度,.left
应该占用剩余空间(即响应式),并.overflowing-text
用水平滚动条溢出。
我检查了其他类似的问题和答案,但我只是无法完成这项工作。
.wrapper {
background-color: silver;
width: 20em;
padding: 0.5em;
line-height: 2;
text-align: center;
display: flex;
justify-content: space-between;
}
.left {
background-color: grey;
padding: 0.5em;
display: flex;
justify-content: space-between;
}
.right {
background-color: #fff;
height: 2em;
width: 6em;
flex: 1;
}
.text-container {
background-color: #fff;
}
.overflowing-text {
line-height: 1;
text-align: left;
overflow-x: auto;
overflow-y: hidden;
}
.button {
flex: 1;
width: 6em;
border: 1px solid red;
}
<div class="wrapper">
<div class="left">
<div class="text-container">
<div class="overflowing-text">This text needs a horizontal scroll bar when it overflows</div>
</div>
<div class="button">Button</div>
</div>
<div class="right">6em fixed W</div>
</div>
解决方案
你必须white-space:nowrap; overflow-x :scroll;
添加.overflowing-text
.wrapper {
background-color: silver;
width: 20em;
padding: 0.5em;
line-height: 2;
text-align: center;
display: flex;
justify-content: space-between;
}
.left {
background-color: grey;
width:8em;
}
.right {
background-color: #fff;
flex: 0 0 6em;
}
.text-container {
background-color: #fff;
}
.overflowing-text {
line-height: 1;
text-align: left;
white-space:nowrap;
overflow-x :scroll;
}
.button {
flex: 1;
width: 6em;
border: 1px solid red;
<div class="wrapper">
<div class="left">
<div class="text-container">
<div class="overflowing-text">This text needs a horizontal scroll bar when it overflows</div>
</div>
</div>
<div class="button">Button</div>
<div class="right">6em fixed W</div>
</div>
推荐阅读
- ios - 链接器命令失败,退出代码为 1(使用 -v 查看调用)本机反应
- javascript - React-Native 无限循环
- javascript - 尝试以“while循环”的形式编写JavaScript“for循环”,同时保持相同的功能
- spring-boot - spring boot 中生命周期阶段号的来源
- javascript - 简单的 Javascript for 循环在第一次迭代后停止
- javascript - React:为什么这个 React 组件不渲染?
- c# - 在 ASP.NET MVC Api 调用 C# 中,在逗号后修剪除 2 个字符之外的所有字符
- pytorch - 将张量列表转换为张量
- javascript - 使用名为 __proto__ 的键在对象中创建属性的尴尬
- javascript - React CSSTransitionGroup - 为 div 提供了意外的 Ref 对象