我正在使用reactjs，当前无法将下面创建的水平线扩展到100%宽度。

这是由于它上面的div占据了80%的屏幕，因此我的元素也有80%。

有没有我可以扩展我的元素“水平线”到100%的宽度，而不修改它的父元素？

const HorizontalLine = () => {
  return <section className="line"></section>;
};

export default HorizontalLine;

.line {
    display: flex;
    flex-wrap: nowrap;
    flex-grow: 1;
    width: 100%;
    border-top: 1px solid grey;
}

下面是我正在处理的页面的结构。 如上所述，我不允许修改父页的结构。

<div class="main-content">
    <div>
        <div class="page">
            <div class="page-header">
                <div class="page-title">
            </div>
            <section className="line"</section> # My element is located here
        </div>
    </div>
  </div>

.page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-bottom: 30px;
}

如有任何帮助，我们将不胜感激。