父組件未調整大小以適合子組件

Question

我有一個<div className="canvas">元素，其中包含四個<div className="stripe stripe-color">元素，我將動態添加隨機顏色類的樣式。

我想使用這個canvas元素作為“動態背景”。

如您所見，我在<div className="stripe"/>元素中有一個<div className="children">{props.children}</div>元素：

const Canvas = (props) => {
  return (
    <div className="stripe-container">
      <div className="children">{props.children}</div>
      <div className="stripe stripe-yellow" />
      <div className="stripe stripe-green" />
      <div className="stripe stripe-red" />
      <div className="stripe stripe-purple" />
    </div>
  );
};

和 SCSS：

.stripe-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
  margin: 3vw;
  height: 100vh;
}

.children {
  position: absolute;
  width: calc(100% - 6vw);
}

.stripe-yellow {
  background: #fdc111;
}

.stripe-green {
  background: #00ad5e;
}

.stripe-red {
  background: #d33136;
}

.stripe-purple {
  background: #8f3192;
}

這里的問題是<div className="canvas">不會增長到適合孩子的身高，所以如果<div className="children">{props.children}</div>中的內容變得太大或者如果用戶使用較小的視口，子級將溢出到高度並允許您滾動，但canvas不會擴展以適應其子級。

作為附加信息， props.children是一個 React 組件，其中包含餐廳菜單的“卡片元素”列表。 如果卡片及其容器沒有足夠的水平空間，則使用flex環繞。 這導致 canvas 在較小的視口上變得太小。 height:100%並且它們的變體也不起作用。

關於如何獲得所需行為的任何想法？ 只要我對實現動態彩色條紋的要求仍然存在，我也願意進行重構。

這是一個沒有 React 的最小可重現示例：

 .stripe-container { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; margin: 3vw; height: 100vh; }.children { position: absolute; width: calc(100% - 6vw); }.stripe { height: 100% }.stripe-yellow { background: #fdc111; }.stripe-green { background: #00ad5e; }.stripe-red { background: #d33136; }.stripe-purple { background: #8f3192; }.child-container { display: flex; flex-wrap: wrap; }.child { border: 1px solid white; margin: 1rem; width: 25vw; height: 25vw; background: lightgray; opacity: 80%; }

 <div class="stripe-container"> <div class="children"> <div class="child-container"> <div class="child">one</div> <div class="child">two</div> <div class="child">three</div> <div class="child">four</div> <div class="child">five</div> <div class="child">six</div> <div class="child">seven</div> <div class="child">eight</div> <div class="child">nine</div> </div> </div> <div class="stripe stripe-yellow"></div> <div class="stripe stripe-red"></div> <div class="stripe stripe-green"></div> <div class="stripe stripe-purple"></div> </div>

Answer 1

我不確定我是否 100% 了解您想要達到的目標。 但我會盡力幫助你。

從children身上去除absolute的東西並將其放在stripes上可能會奏效。 此外，您需要 position 分別在左側 25% 寬度上的stripes 。

我認為您不再需要 CSS grid了，所以我刪除了它並添加了一些小的調整。 如果您有任何問題或我的問題是否有誤，請告訴我。

 .stripe-container { padding: 0; margin: 3vw; position: relative; }.children { position: relative; z-index: 2; width: 100%; }.stripe { width: 25%; height: 100%; position: absolute; top: 0; bottom: 0; z-index: 1; }.stripe-yellow { left: 0; background: #fdc111; }.stripe-green { left: 25%; background: #00ad5e; }.stripe-red { left: 50%; background: #d33136; }.stripe-purple { left: 75%; background: #8f3192; }.child-container { display: flex; flex-wrap: wrap; }.child { border: 1px solid white; margin: 1rem; width: 25vw; height: 25vw; background: lightgray; opacity: 80%; box-sizing: border-box; }

 <div class="stripe-container"> <div class="children"> <div class="child-container"> <div class="child">one</div> <div class="child">two</div> <div class="child">three</div> <div class="child">four</div> <div class="child">five</div> <div class="child">six</div> <div class="child">seven</div> <div class="child">eight</div> <div class="child">nine</div> </div> </div> <div class="stripe stripe-yellow"></div> <div class="stripe stripe-red"></div> <div class="stripe stripe-green"></div> <div class="stripe stripe-purple"></div> </div>

這樣，無論大小，條紋都可以作為條帶容器的背景，並且由於子元素不再是絕對的，因此容器最終能夠與子元素具有相同的大小。

Answer 2

為什么不對條紋背景使用線性漸變？ 您可以使用更簡單的 CSS 完成您想要做的事情，而無需額外的標記。

可選：如果您聲明了條帶 colors 的自定義屬性，您可以簡單地通過設置不同的值來更改它們，而不必每次都重寫漸變（盡管漸變本身並不復雜或特別冗長。）

 :root { /* Using custom properties here to demonstrate that you could control the stripe colors without hard-coding them in the stylesheet. an element could declare its own colors via another class or even an inline style, eg <div style="--stripe-1: blue"> This isn't required. Just a suggestion. */ --stripe-1: #fdc111; /* yellow */ --stripe-2: #00ad5e; /* green */ --stripe-3: #d33136; /* red */ --stripe-4: #8f3192; /* purple */ }.container { padding: 0; min-height: 100vh; display: flex; flex-wrap: wrap; background: linear-gradient( to right, var(--stripe-1) 0 25%, var(--stripe-2) 25% 50%, var(--stripe-3) 50% 75%, var(--stripe-4) 75% ); }.container > * { border: 1px solid white; margin: 1rem; width: 25vw; height: 25vw; background: lightgray; opacity: 80%; }

 <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> <div>eight</div> <div>nine</div> </div>