如何在 ReactJs 中將水平線擴展到 100% 寬度

Question

我正在使用reactjs並且我目前無法將我在下面創建的水平線擴展到 100% 寬度。

這是因為它上面的 div 占據了 80% 的屏幕，因此我的元素也有 80%。

無論如何，我可以在不修改父元素的情況下將我的元素“水平線”擴展到 100% 寬度嗎？

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

export default HorizontalLine;

css

.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>

頁.css

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

羅恩

請看這里我希望這條線不在左側的藍色背景之上。 所以我試圖限制它可以從左邊 go 。

任何幫助將非常感激。

Answer 1

要使該行從當前部分中斷並填充頁面寬度，請將這些添加到.line class：

.line{
  position:absolute;
  left:0;
}

您可以額外添加width:100vw; 確保該行覆蓋頁面的 100 個虛擬寬度。

Answer 2

你可以在.line上試試這個：

flex-grow: 0;
flex-shrink: 0;
flex-basis: 100%;

但這會對.page的其他孩子產生影響，它們會縮小