Flexbox使用原始SVG宽度而不是缩放宽度

Question

我正在尝试制作一个包含2个弹性div框的部分，其中：

• 左一个：具有的自动宽度img。
• 右一个：具有左宽度。

我几乎所有的东西都在工作，但是我坚持这一点：

似乎设置了SVG文件的原始宽度，而不是“缩放”的宽度。SVG图像包含在img标记中，并使用height: 100%;和缩放width: auto;。

我一直在寻找Internet上的多个解决方案，但没有一个起作用。

有什么办法解决吗？（如果可能，不使用JavaScript）

---

索引

<div id="SideMessage">
    <div class="Decoration">
        <img src="./image.svg" alt="ERROR">
    </div>
    <div class="Message">
        <span>SAMPLE TEXT</span>
    </div>
</div>

style.css

div#SideMessage {
    /**/background: lightblue;
    display: flex;
    height: 64px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
        div#SideMessage > div.Decoration {
            /**/border: 1px dashed green;
            flex-basis: auto;
            flex-grow: 0;
            flex-shrink: 0;
        }
        div#SideMessage > div.Message {
            /**/border: 1px dashed red;
            flex-basis: auto;
            flex-grow: 1;
            flex-shrink: 1;
        }
                div#SideMessage > div.Decoration > img {
                    height: 100%;
                    width: auto;
                }
                div#SideMessage > div.Message > span {
                    font-size: 20px;
                    letter-spacing: 2px;
                }

image.svg

<svg xmlns="http://www.w3.org/2000/svg" width="18.475px" height="32px" viewBox="0 0 18.475 32">
    <polygon fill="rgb(0, 0, 0)" points="0,0 18.475,0 0,32"/>
</svg>

Answer 1

两年后，但打开<img>包装<div class="Decoration">应该可以修复它。并添加box-sizing: border-box;以防止其边框/填充溢出。