允许子元素扩展到父 div 的填充之外

Question

One of my wrapper divs has it's own padding, and needs it for organizational layout purposes.

However, one of the children components needs to go completely across the screen, so basically ignoring the padding it's parent set.

How could I make this child component go completely across it's parent div, ignoring that padding set for it?

Here is an example of what I have with some further instructions on what I am trying to do:

 const App = () => { return ( <div style={{ padding: 20, backgroundColor: 'red' }}> <h3>See the following blue background paragraph. I want it to go beyond the padding I set for the parent div</h3> <p style={{overflowX: 'scroll', whiteSpace: 'nowrap', backgroundColor: 'blue'}}> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <h3>Think of it this way: I still want it to scroll as needed, but, I want it to completely go across my parent div, surpassing the padding set on it.</h3> </div> ) } ReactDOM.render( <App />, document.getElementById('app') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>

Answer 1

You could give it negative margin equal to your parent's padding, so something like this perhaps?

 const App = () => { return ( <div style={{ padding: 20, backgroundColor: 'red' }}> <h3>See the following blue background paragraph. I want it to go beyond the padding I set for the parent div</h3> <p style={{overflowX: 'scroll', whiteSpace: 'nowrap', backgroundColor: 'blue', margin: -20}}> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <h3>Think of it this way: I still want it to scroll as needed, but, I want it to completely go across my parent div, surpassing the padding set on it.</h3> </div> ) } ReactDOM.render( <App />, document.getElementById('app') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>

Answer 2

You can set the <p> as an absolute element. See below:

 const App = () => { return ( <div style={{ padding: 20, backgroundColor: 'red', position: 'relative' }}> <h3>See the following blue background paragraph. I want it to go beyond the padding I set for the parent div</h3> <div style={{ paddingBottom: 30}}><p style={{overflowX: 'scroll', whiteSpace: 'nowrap', backgroundColor: 'blue', position: 'absolute', left: 0, right: 0, margin: 'auto'}}> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <h3>Think of it this way: I still want it to scroll as needed, but, I want it to completely go across my parent div, surpassing the padding set on it.</h3> </div> ) } ReactDOM.render( <App />, document.getElementById('app') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>