Is it possible to set a max on how far a component can scroll horizontally before text is wrapped?

Issue

I'd like for users to be able scroll horizontally across text in a React component, but I'd like to still have some bounded width that's larger than the component's bounding rectangle. This way, I could just have regular paragraphs without worrying about any line breaking on-the-fly. I know I would need to set the overflow-x property to auto, but I'm not sure what to do past that. Thanks for the help!

Solution

Here would be my solution.

body {
  width: 100%;
  max-width: 800px;
  margin: 30px auto;
}

.wrapper {
  border: 1px solid #afafaf;
  width: 100%;
  overflow-x: scroll;
  box-sizing: border-box;
}

.inner {
  padding: 10px;
  width: 130%;
}

<div class="wrapper">
  <div class="inner">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex labore, provident dolorum repellendus earum aliquid voluptatem nobis odit. Deserunt corrupti repellendus voluptate harum quaerat adipisci aut sequi consequuntur voluptas cum?</div>
</div>

Answered By - Fred