允许子元素扩展超出父 div 的填充

Question

我的一个包装器 div 有它自己的填充，并且需要它用于组织布局。

但是，其中一个子组件需要完全穿过屏幕，所以基本上忽略它的父集的填充。

我怎样才能让这个子组件完全跨越它的父 div，而忽略为它设置的填充？

这是一个示例，其中包含一些关于我正在尝试做的进一步说明：

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

您可以将<p> 设置为绝对元素。见下文：

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>

Answer 2

你可以给它负边距等于你父母的填充，所以可能是这样的吗？

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>