Question

我正在添加一个带有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-container div下面有额外的空间。但是，正如其他帖子所建议的那样，改变显示效果是没有效果的。

额外注意事项：

我不想更改 widget-outer 和 widget 类的样式，因为它们适用于其他小部件。 小部件类上的溢出-y：自动是必需的，因为其他一些小部件具有应该可滚动的更长内容。
我希望 svg 元素占用小部件中的所有可用空间，以获取 widget-container 上任何高度和宽度的组合。
减少 svg 元素的 max-height 有帮助，但不能算作解决此问题的正确方法。

tl; dr是否可以在没有滚动条的情况下将 svg 放入小部件？

Answer 1

您需要将 if ($j(".large-6.columns.check-Div > .custom-table-box:contains('size-full')")) { $j('#addImg').addClass(".hasImage");//also missing . for class }和.svg-container更改为.svg

＆＃13;
＆＃13;
display: block
＆＃13;
.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; }
＆＃13;
＆＃13;
＆＃13;

Answer 2

SVG元素垂直定位在基线处。这就是为什么它在底部占用4px额外空间的原因。只需告诉它在顶部垂直对齐，您将获得所需的结果。只需改变你的CSS

.svg {
    max-width: 100%;
    max-height: 100%;
}

到

.svg {
    max-width: 100%;
    max-height: 100%;
    vertical-align: top;
}

Answer 3

您只需在vertical-align: middle;上设置svg即可。这将保留给定布局上的预期行为，display: block可能不会。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 4

这是一种奇怪的行为。即使我正在寻找它背后的技术原因。

暂时您可以删除滚动条 - 进行两项更改：

从display: inline-block;类

.svg-container

将float:left添加到SVG元素。或display也有效。

＆＃13;

.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%;
  float: left;
}

＆＃13;

<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>

＆＃13;

Answer 5

我找到的另一个解决方案是删除滚动

.widget {
    overflow:hidden;
    flex: 1;
}

子项与父项相同，但滚动显示

5 个答案: