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

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进行包裹。这导致画布在较小的视口中变得太小。CCD_ 11及其变体也不起作用。

有什么想法可以让我得到想要的行为吗？只要实现动态彩色条纹的要求仍然存在，我也愿意进行重构。

下面是一个没有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上可能会起到作用。此外，您还需要将stripes分别放置在左侧宽度的25%上。

我认为你不再需要CSSgrid了，所以我删除了它，并添加了一些小的调整。如果你有任何问题或者我问错了，请告诉我。

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

这样，无论大小，条纹都可以作为条纹容器的背景，并且由于children元素不再是绝对的，因此容器最终能够具有与children相同的大小。

Answer 2

为什么不为条纹背景使用线性渐变？您可以用更简单的CSS完成您想要做的事情，而不需要额外的标记。

可选：如果你为条纹颜色声明了自定义属性，你可以通过设置不同的值来更改它们，而不必每次都重写渐变(尽管渐变本身并不复杂或特别冗长。(

: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, e.g.
<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>