弹力SVG保持纵横比

Question

我有应用布局如本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。

Answer 1

更新下面的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>

Answer 2

尝试min-height而不是height。

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