html - Flexbox 中的 SVG 对象

Question

我试图将一个 SVG 对象放入一个 flexbox 中，结果却把整个事情搞砸了:

https://jsfiddle.net/h8n1wxcn/

* {
    margin: 0;
    padding: 0;
}
			
.parent {
    display: flex;
    flex-direction: row;
    background-color: red;
    width: 100%;
    height: 200px;
    justify-content: space-between;
}
			
.child {
    flex-grow: 0;
    background-color: yellow;
    border: 1px dashed blue;
}
			
.svg {
    background-color: yellow;
    border: 1px dashed blue;
}

<div class="parent">
    <div class="child">
        <p>Hello</p>
    </div>
    <div class="svg">
        <object id="loader" type="image/svg+xml" data="https://la-cascade.io/content/images/2015/06/kiwi.svg" width="150px">
    </div>
    <div class="child">
        <p>Yo</p>
    </div>
</div>

我希望 .svg div 居中，当我用一些随机文本替换对象标签时，它工作得很好，但突然当我放置对象标签时，它最终删除或隐藏了最后一个 div我的 flex 盒子

Answer 1

您必须关闭 object 标签。

您也可以使用 img 代替 object。

* {
    margin: 0;
    padding: 0;
}
			
.parent {
    display: flex;
    flex-direction: row;
    background-color: red;
    width: 100%;
    height: 200px;
    justify-content: space-between;
}
			
.child {
    flex-grow: 0;
    background-color: yellow;
    border: 1px dashed blue;
}
			
.svg {
    background-color: yellow;
    border: 1px dashed blue;
}

<div class="parent">
    <div class="child">
        <p>Hello</p>
    </div>
    <div class="svg">
        <img src="https://la-cascade.io/content/images/2015/06/kiwi.svg" width="150"/>
    </div>
    <div class="child">
        <p>Yo</p>
    </div>
</div>