Question

我希望.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>

Answer 1

您必须在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>

具有水平滚动和固定宽度元素的Flexbox

1 个答案: