子对象与父级大小相同，但会出现滚动。
子对象与父级大小相同，但会出现滚动。
提问于 2017-03-24 10:57:48
我正在添加一个带有SVG的新小部件。
我使它的大小与父母相同，但它会导致不必要的滚动出现。
小提琴：https://jsfiddle.net/Murval/j1oe6x4b/
.widget-outer {
display: flex;
height: 210px;
width: 400px;
border: 1px solid black;
}
.widget {
overflow-y: auto;
flex: 1;
}
.svg-container {
text-align: center;
display: inline-block;
width: 100%;
height: 100%;
}
.svg {
max-width: 100%;
max-height: 100%;
}<div class="widget-outer">
<div class="widget">
<div class="svg-container">
<svg class="svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" style="fill: gray;"></circle>
</svg>
</div>
</div>
</div>
正如我所看到的，滚动出现了，因为在svg-容器div下面有额外的空间。但是，改变显示，就像在其他帖子中所建议的那样，没有任何效果。
额外考虑事项：
- 我不想改变小部件-外部和小部件类的样式，因为它们在其他小部件上运行得很好。overflow:小部件类上的自动是必需的，因为其他一些小部件有更长的内容，应该可以滚动。
- 我希望svg元素为小部件容器上的任意高度和宽度组合占用小部件中的所有可用空间。
- 降低svg单元的最大高度是有帮助的，但不能算作解决这个问题的适当方法。
tl;dr有没有可能在没有滚动条的小部件中安装svg？
回答 6
Stack Overflow用户
回答已采纳
发布于 2017-03-24 11:04:59
您需要将.svg-container和.svg更改为display: block
.widget-outer {
display: flex;
height: 210px;
width: 400px;
border: 1px solid black;
}
.widget {
overflow-y: auto;
flex: 1;
}
.svg-container {
text-align: center;
width: 100%;
height: 100%;
}
.svg {
max-width: 100%;
max-height: 100%;
display: block;
}<div class="widget-outer">
<div class="widget">
<div class="svg-container">
<svg class="svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" style="fill: gray;"></circle>
</svg>
</div>
</div>
</div>
Stack Overflow用户
发布于 2017-03-24 11:20:41
SVG元素垂直定位于基线。这就是为什么它在底部增加了4px空间。只要告诉它在顶部垂直对齐，你就会得到想要的结果。只需将css更改为
.svg {
max-width: 100%;
max-height: 100%;
}至
.svg {
max-width: 100%;
max-height: 100%;
vertical-align: top;
}Stack Overflow用户
发布于 2017-03-24 11:25:43
您所需要的只是在vertical-align: middle;上设置svg。这将保持对给定布局的预期行为，而display: block可能不这样做。
.widget-outer {
display: flex;
height: 210px;
width: 400px;
border: 1px solid black;
}
.widget {
overflow-y: auto;
flex: 1;
}
.svg-container {
text-align: center;
display: inline-block;
width: 100%;
height: 100%;
}
.svg {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}<div class="widget-outer">
<div class="widget">
<div class="svg-container">
<svg class="svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" style="fill: gray;"></circle>
</svg>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42997728
复制相关文章
相似问题
腾讯云开发者
