Allow child element expand beyond parent div's padding

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>

score 1 · Answer 1 · answered Dec 01 '20 at 19:38

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>

Aib Syed · Accepted Answer · 2020-12-01T22:06:17.493

1

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>

edited Dec 01 '20 at 22:06

answered Dec 01 '20 at 19:42

Aib Syed

3,118
2
19
30

That screws up the the following elements below it (just like in the example you did). How would I apply that but still maintain the original alignment for the other elements? – theJuls Dec 01 '20 at 19:57
1

Important notice, If you set the `p` to `absolute` you have to your wrapper `position: relative` so that won't mess the whole layout. Comment if you have some problems with that please. – Nir Gofman Dec 01 '20 at 20:02
1

See the updated snippet. Since the `p` is now absolute it will not respect padding from the parent `div`. However, if you add another div around the absolute `p` you can apply the padding there instead. – Aib Syed Dec 01 '20 at 20:17
@NirGofman you're absolutely right that without the wrapper being `position:relative` it screws up the layout (mainly when scrolling), but if I do put position relative, it still keeps the original parent's padding which is what I am trying to remove. Is there something else missing perhaps? – theJuls Dec 01 '20 at 21:28
@theJuls Are you trying to remove the styling on the parent container now? There is a pretty good answer here that can help you: https://stackoverflow.com/questions/17115344/absolute-positioning-ignoring-padding-of-parent – Aib Syed Dec 01 '20 at 21:46
@AibCodesDaily no, the styling on the parent is fine. The issue I am now having is that if I set the parent as `position: relative` on my app, it reverts back to before I did the changes you suggested (the padding i don't want on the `p` element comes back). Even though on your demo it is clear it works. Of course, if I don't put it in, the layout gets screwed up if I scroll down. Not sure what is missing there in comparison to your demo. – theJuls Dec 01 '20 at 21:57
1

Are you applying the styles I included on the additional `div` that wraps around the `p` element? If you're doing it inline, the div should look like this `

`. – Aib Syed Dec 01 '20 at 22:02
1

I also updated the snippet to make all of the CSS inline. – Aib Syed Dec 01 '20 at 22:06
1

@AibCodesDaily I am happy to inform you that the problem was in fact on my end between the keyboard and the chair ;) There was extra padding that I had not accounted for coming from yet another div. Your solution works perfectly. Thank you so much for your help – theJuls Dec 01 '20 at 22:09
1

I also have the same problem from time-to-time :) - Happy to help! – Aib Syed Dec 01 '20 at 22:09

Allow child element expand beyond parent div's padding

2 Answers2