Css Flexbox和SVG内容标题调整大小页脚 .家{ 显示器：flex；弯曲方向：立柱；宽度：1000px；高度：800px；背景颜色：浅灰色； } .标题标题{ 宽度：100%；显示器：flex； flex:035px；高度：35px；背景颜色：浅蓝色；对齐项目：居中；证明内容：中心； } 梅因先生{ 显示器：flex；宽度：100%；弹性：1；背景颜色：浅绿色； } .左窗格{ 显示器：flex；弹性：1；弯曲方向：立柱；背景色：白色； } .右窗格{ flex:0350px；宽度：350px；左边框：1px实心浅灰色； &闵先生{ flex:0100px；宽度：100px； } } .内容{ 宽度：100%；身高：100%；背景颜色：黄色； } .页脚{ 显示器：flex；位置：绝对位置； top:810px；左：0px； flex:035px；宽度：1000px；高度：35px；边框：1px纯黑；对齐项目：居中；证明项目：中心； }_Css_Svg_Flexbox

Css Flexbox和SVG内容标题调整大小页脚 .家{ 显示器：flex；弯曲方向：立柱；宽度：1000px；高度：800px；背景颜色：浅灰色； } .标题标题{ 宽度：100%；显示器：flex； flex:035px；高度：35px；背景颜色：浅蓝色；对齐项目：居中；证明内容：中心； } 梅因先生{ 显示器：flex；宽度：100%；弹性：1；背景颜色：浅绿色； } .左窗格{ 显示器：flex；弹性：1；弯曲方向：立柱；背景色：白色； } .右窗格{ flex:0350px；宽度：350px；左边框：1px实心浅灰色； &闵先生{ flex:0100px；宽度：100px； } } .内容{ 宽度：100%；身高：100%；背景颜色：黄色； } .页脚{ 显示器：flex；位置：绝对位置； top:810px；左：0px； flex:035px；宽度：1000px；高度：35px；边框：1px纯黑；对齐项目：居中；证明项目：中心； }

css svg

Css Flexbox和SVG内容标题调整大小页脚 .家{ 显示器：flex；弯曲方向：立柱；宽度：1000px；高度：800px；背景颜色：浅灰色； } .标题标题{ 宽度：100%；显示器：flex； flex:035px；高度：35px；背景颜色：浅蓝色；对齐项目：居中；证明内容：中心； } 梅因先生{ 显示器：flex；宽度：100%；弹性：1；背景颜色：浅绿色； } .左窗格{ 显示器：flex；弹性：1；弯曲方向：立柱；背景色：白色； } .右窗格{ flex:0350px；宽度：350px；左边框：1px实心浅灰色； &闵先生{ flex:0100px；宽度：100px； } } .内容{ 宽度：100%；身高：100%；背景颜色：黄色； } .页脚{ 显示器：flex；位置：绝对位置； top:810px；左：0px； flex:035px；宽度：1000px；高度：35px；边框：1px纯黑；对齐项目：居中；证明项目：中心； },css,svg,flexbox,Css,Svg,Flexbox,例如：我有一个如示例中所示的结构，它是一个具有左窗格和右窗格的容器。可以通过编程方式最小化右侧窗格。左窗格中的SVG设置为占据100%的高度和100%的宽度。左窗格将“flex grow”设置为1，以使其占据100%的自由高度，但不应超出其父div的边界期望的结果是，当右窗格最小化，左窗格扩展其宽度以占用现在可用的可用空间时，SVG仍应将其自身约束为可用高度（100%高度），因为高度没有改变，而只是宽度。然而，实际上它溢出了div。底部有一个绝对定位的页脚，所以你可以看到它溢出到div中你

例如：

我有一个如示例中所示的结构，它是一个具有左窗格和右窗格的容器。可以通过编程方式最小化右侧窗格。左窗格中的SVG设置为占据100%的高度和100%的宽度。左窗格将“flex grow”设置为1，以使其占据100%的自由高度，但不应超出其父div的边界

期望的结果是，当右窗格最小化，左窗格扩展其宽度以占用现在可用的可用空间时，SVG仍应将其自身约束为可用高度（100%高度），因为高度没有改变，而只是宽度。然而，实际上它溢出了div。底部有一个绝对定位的页脚，所以你可以看到它溢出到div中

你知道问题出在哪里吗？如果我使用常规div设置为100%宽度、100%高度，而不是SVG，那么它可以正常工作，不会出现任何问题。Div不会溢出其父级。

Div没有您所说的需要保留的定义的纵横比。您是否希望在SVG中也放弃这一点，否则您的情况将不具有可比性。如果这样做，请设置preserveSpectratio=“none”，或者如果必须保持纵横比，则slice是否能满足您的要求？PreserveSpectratio将定义缩放的特征-内容不应溢出视口。视口尺寸指定为包含div的宽度和高度的100%。在这种情况下，SVG超出了视口尺寸，这很奇怪。“满足”明确规定，图形应缩放到符合视口的高度和宽度，这是根据官方规范。我似乎无法理解为什么违反规范。设置最大高度：100%；也会解决你的问题

  <body>
    <div class="home">
      <div class="title-header">
        <div>HEADER</div>
      </div>
      <div class="main">
        <div class="left-pane">
          <div class="content">
            <!-- SVG overflows the container on resize -->
            <svg height="100%" width="100%" viewbox="0 0 200 200" preserveAspectRatio="xMidYMin meet">
              <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
            </svg>   

            <!-- Using a Div instead works great!
              <div style="width: 100%; height: 100%; background-color: white">
              </div> -->
          </div>          
        </div>
        <div id="rightpane" class="right-pane">
          <button onClick="toggleSize()">Resize</button>
        </div>
      </div>
    </div>
    <div class="footer">
      <div>FOOTER</div>
    </div>
  </body>
</html>


.home {
  display: flex;
  flex-direction: column;
  width: 1000px;
  height: 800px;
  background-color: lightgray;
}

.title-header {
  width: 100%;
  display: flex;
  flex: 0 0 35px;
  height: 35px;
  background-color: lightblue;
  align-items: center;
  justify-content: center;
}

.main {
  display: flex;
  width: 100%;
  flex: 1;
  background-color: lightgreen;
}

.left-pane {
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: white;
}

.right-pane {
  flex: 0 0 350px;
  width: 350px;
  border-left: 1px solid lightgray;
  &.min {
    flex: 0 0 100px;
    width: 100px;
  }
}

.content {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

.footer {
  display: flex;
  position: absolute;
  top: 810px;
  left: 0px;
  flex: 0 0 35px;
  width: 1000px;
  height: 35px;
  border: 1px solid black;
  align-items: center;
  justify-items: center;
}