父组件未调整大小以适合子组件

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>