My challenge lies in managing the width of a div element I've set to 600px. Inside this parent div, I have a row of elements which I wish to exceed the width of the parent. These items are enclosed in a container div to organize them:
<div className="App">
<div style={{ overflow: "scroll" }}>
<div style={{ display: "flex", flexDirection: "row" }}>
<div style={{ width: "600px" }}>Test 1</div>
<div style={{ width: "600px" }}>Test 2</div>
<div style={{ width: "600px" }}>Test 3</div>
<div style={{ width: "600px" }}>Test 4</div>
</div>
</div>
</div>Unfortunately, the current setup limits the "Test" divs' width so they all appear on screen. Adjusting the row container div's width allows the children elements to expand up to 600px.
I suspect that flexbox plays a role here, but I'm unsure about how to proceed. Any advice on implementing the scroll function without restricting the divs' widths would be greatly appreciated.