Overflow restricts width of children-CodePudding

I have a div element that I set to have a particular width, say 600px. In that div, I have a row of elements that I would like to each have a width greater than the width of that parent div. These elements are encased in a container div to hold the elements of that row as such:

<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>

However, this just constrains the width of the "Test" divs so that all four divs fit on the screen. I've tried setting the width of the row container div, and this allows the width of the children elements to expand to 600px.

I imagine this has something to do with flexbox, but I'm lost there and would like to know how I can implement the scroll function without restricting the width of the divs.

CodePudding user response：

I figured it out. All I needed to do was set the min-width of the children to the desired width.

CodePudding user response：

Just change your width style into min-with.

Example below:

<div className="App">
  <div style={{ overflow: "scroll" }}>
    <div style={{ display: "flex", flexDirection: "row" }}>
      <div style={{ minWidth: "600px" }}>Test 1</div>
      <div style={{ minWidth: "600px" }}>Test 2</div>
      <div style={{ minWidth: "600px" }}>Test 3</div>
      <div style={{ minWidth: "600px" }}>Test 4</div>
    </div>
  </div>
</div>