时间戳

首页 > 解决方案 > SVG 被推出 flexbox 容器的视口

html - SVG 被推出 flexbox 容器的视口

问题描述

我正在尝试使用 flexbox 为混合元素创建水平div布局svg。当绿色框的宽度足够增加时，红色和黄色 (svg) 框会被推到不可见的地方。但是，如果我将它们包装在 div 中，则不会发生这种情况。为什么是这样？

.container {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
}
<div class="container">
  <svg width="100px">
    <rect width="100" height="100" fill="red" />
  </svg>
  <div>
    <svg width="1200px">
      <rect width="100" height="100" fill="green" />
    </svg>
  </div>
  <svg width="100px">
    <rect width="100" height="100" fill="yellow" />
  </svg>
</div>

标签： htmlcsssvgflexbox

解决方案

可能是，min-width计算有问题。似乎，CSS Flexbox 规范是说将min-width: autoflex 项解析为“最小内容”。并且周围有一个最小宽度，而简单的“”没有。

我会添加flex-shrink: 0;或其他内容以使其更“简单”。

推荐阅读