我试图放置一个background-image，它应该垂直重复并水平拉伸，但保持其高度与原始svg相同.
我试图修复background-size: 100% 33px;，但原始高度没有保留.
所有.child个容器的高度应相同，并且应拉伸到其父容器.
以下是我的try
background-size: 100% 33px; // TO FIX SIZE
background-repeat: repeat-y; // REPEAT ONLY THROUGH Y
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
border: 5px solid indianred;
}
.parent {
height: 100vh;
background-color: grey;
display: flex;
}
div.child {
background-image: url("https://assets-marvin.leadsquared.com/smartviews/images/column.svg");
}
.child:nth-child(1) {
flex: 1;
}
.child:nth-child(2) {
flex: 2;
background-size: 100% 33px;
background-repeat: repeat-y;
}
.child:nth-child(3) {
flex: 3;
background-size: 100%;
}<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>