在 flexbox 中拉伸 svg 到最大高度保持纵横比答案

【问题标题】：Stretch svg in flexbox to max height keeping aspect ratio在 flexbox 中拉伸 svg 到最大高度保持纵横比
【发布时间】：2017-10-25 19:38:09
【问题描述】：

我有这个JsFiddle中的应用程序布局

我需要这个 svg 来拉伸到 #contentComponent 的全高，同时保持纵横比，并且 sideComponent 相应地占据剩余的宽度。不使用js也可以吗？

下面的小提琴代码：

<div id="appComponent">
  <div id="topComponent"></div>
  <div id="contentComponent">
    <div id="svgComponent">
      <div id="svgInlineWrapper">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="xMinYMin">
          <circle cx="32" cy="32" r="32" fill="blue" />
        </svg>
      </div>
    </div>
    <div id="sideComponent">
      <div id="sideScrollable">
        <div class="sideRow">
          Test1
        </div>
        <div class="sideRow">
          Test2
        </div>
        <div class="sideRow">
          Test3
        </div>
        <div class="sideRow">
          Test4
        </div>
      </div>
    </div>
  </div>
</div>

html,
body {
  margin: 0;
  padding: 0;
}

#appComponent {
  height: 100vh;
  width: 100%;
  background-color: #ff0000;
  display: flex;
  flex-direction: column;
}

#topComponent {
  flex: 0 0 40px;
  width: 100%;
  background-color: #00ff00;
}

#contentComponent {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-content: stretch;
}

#svgComponent {
  height: 100%;
  flex: 1 1 auto;
  background-color: #aa00aa;
}

#svgInlineWrapper {
  height: 100%;
}

#svgInlineWrapper svg {
  height: 100%;
}

#sideComponent {
  position: relative;
  flex: 1 1 200px;
  background-color: #0000ff;
}

#sideScrollable {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

.sideRow {
  width: 200px;
  height: 100px;
}

编辑：

看起来它在 chrome 和 Firefox 中的工作方式完全不同。在 Firefox 中，它可以拉伸到 100% 的高度，但在 chrome 中似乎不起作用。

【问题讨论】：

标签： html css svg flexbox

【解决方案1】：

尝试min-height 而不是height。

#svgComponent {
  min-height: 100%;
  flex: 1 1 auto;
  background-color: #aa00aa;
}

【讨论】：

【解决方案2】：

更新下面的 css，将100%更改为100vh以使用纵横比进行拉伸。

#svgInlineWrapper svg {
  height: 100vh;
}

html,
body {
  margin: 0;
  padding: 0;
}

#appComponent {
  height: 100vh;
  width: 100%;
  background-color: #ff0000;
  display: flex;
  flex-direction: column;
}

#topComponent {
  flex: 0 0 40px;
  width: 100%;
  background-color: #00ff00;
}

#contentComponent {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-content: stretch;
}

#svgComponent {
  height: 100%;
  flex: 1 1 auto;
  background-color: #aa00aa;
}

#svgInlineWrapper {
  height: 100%;
}

#svgInlineWrapper svg {
  height: 100vh;
}

#sideComponent {
  position: relative;
  flex: 1 1 200px;
  background-color: #0000ff;
}

#sideScrollable {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

.sideRow {
  width: 200px;
  height: 100px;
}

<div id="appComponent">

  <div id="topComponent"></div>
  <div id="contentComponent">
    <div id="svgComponent">
      <div id="svgInlineWrapper">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="xMinYMin">
          <circle cx="32" cy="32" r="32" fill="blue" />
        </svg>
      </div>
    </div>
    <div id="sideComponent">
      <div id="sideScrollable">
        <div class="sideRow">
          Test1
        </div>
        <div class="sideRow">
          Test2
        </div>
        <div class="sideRow">
          Test3
        </div>
        <div class="sideRow">
          Test4
        </div>
      </div>

    </div>
  </div>

</div>

【讨论】：

我无法将 svg 设置为 100vh，因为它会溢出 #topComponent 的高度。