設(shè)置width為一些適當(dāng)?shù)拇笾担ɡ?code>500px），并white-space: nowrap在.rightPaneItem.
請(qǐng)記住，元素的width屬性值.rightPaneItem需要根據(jù)rightPaneItem最長(zhǎng)內(nèi)容的內(nèi)容進(jìn)行調(diào)整。
function App() {
return (
<div className="App">
<div className="leftPane">
LeftPane
{new Array(100).fill(0).map((_, i) => (
<div key={i} class="leftPaneItem">
item {i}
</div>
))}
</div>
<div className="rightPane">
RightPane
{new Array(100).fill(0).map((_, i) => (
<div key={i} class="rightPaneItem">
item {i} with a way longer text so you should be able to scroll
horizontally
</div>
))}
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
.App {
text-align: center;
max-height: 300px;
max-width: 300px;
display: flex;
border: 3px dashed green;
overflow: auto;
padding: 5px;
}
.leftPane {
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
border: 2px solid red;
padding: 5px;
}
.rightPane {
display: flex;
flex-direction: column;
height: 100%;
flex: 2;
border: 2px solid blue;
padding: 5px;
overflow-x: auto;
}
.leftPaneItem {
height: 20px;
}
.rightPaneItem {
height: 20px;
width: 500px;
overflow-x: hidden;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
編輯：
由于您將在右列中擁有可變長(zhǎng)度的內(nèi)容，因此您可以使用以下方法。
您可以在外部容器和元素上添加，而不是在 上設(shè)置width和overflow屬性。.rightPaneItemoverflow: auto.App.rightPane
function App() {
return (
<div className="App">
<div className="leftPane">
LeftPane
{new Array(100).fill(0).map((_, i) => (
<div key={i} class="leftPaneItem">
item {i}
</div>
))}
</div>
<div className="rightPane">
RightPane
{new Array(100).fill(0).map((_, i) => {
if (i % 2 == 0) {
return (
<div key={i} class="rightPaneItem">
item {i} with a way longer text so you should be able to scroll
horizontally
</div>);
} else {
return (
<div key={i} class="rightPaneItem">
item {i} with a way longer text so you should be able to scroll
horizontally. item {i} with a way longer text so you should be able to scroll
horizontally. item {i} with a way longer text so you should be able to scroll
horizontally
</div>);
}
})}
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
.App {
font-family: sans-serif;
text-align: center;
max-height: 300px;
max-width: 300px;
display: flex;
border: 3px dashed green;
overflow: auto;
padding: 5px;
}
.leftPane {
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
border: 2px solid red;
padding: 5px;
}
.rightPane {
display: flex;
flex-direction: column;
height: 100%;
flex: 2;
border: 2px solid blue;
padding: 5px;
overflow: auto;
}
.leftPaneItem {
height: 20px;
}
.rightPaneItem {
height: 20px;
position: relative;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
我還在 codesandbox 上創(chuàng)建了一個(gè)演示，它類似于您問(wèn)題中發(fā)布的演示，并使用與第二個(gè)代碼片段中使用的相同的 CSS。
