带有 svg 的响应式弹性列

Question

我正在尝试在我的页面右侧设置一个面板。它将有一些内联元素和中间的 svg 图像。

我希望面板最大为宽度的 50%，高度为 100%。 SVG 图像应在保持纵横比以填充可用高度的同时增长。因此容器会变宽。当高度被填充或容器宽度达到 50% 时，它应该停止增长。

这是我想出的：

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #333;
}

#viewport {
  background: #FFF;
  transition: all 200ms;
  padding: 5px;
  position: relative;
  animation: sizing 8s infinite;
}

.column {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
  border: 1px dotted #000;
  max-height: 100%;
  max-width: 50%;
}

.svgContainer {
  flex: 1;
}

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

@keyframes sizing {
  0% {
    width: 300px;
    height: 200px;
  }
  25% {
    width: 500px;
    height: 200px;
  }
  50% {
    width: 500px;
    height: 400px;
  }
  75% {
    width: 300px;
    height: 400px;
  }
  100% {
    width: 300px;
    height: 200px;
  }
}

<div id="viewport">
  <div class="column">
    <h4>Some header</h4>
    <div class="svgContainer">
      <svg viewBox="0 0 300 214" width="300" height="214">
        <rect x="0" y="0"
          width="300" height="214" 
          stroke-width="5"
          stroke="#F00"
          rx="15" ry="15"
          fill="none"/>
         <circle cx="150" cy="107" r="80" stroke="#F00" stroke-width="5" fill="none"/>
    </svg>
    </div>
    <button>some button</button>
  </div>
</div>

我在视口大小上添加了一个动画来说明几个问题：

1. 当视口狭窄时，面板内容溢出。我希望 svg 缩小。
2. 当面板太高时，svg 和按钮之间有空间，我想将这个空间移到按钮下方。

我用 flexbox (flex-direction: column + flex:1) 做到了，但我好像遗漏了什么

Answer 1

对于 when panel is too high there is space between the svg and the button, I'd like to move this space at the bottom. ：从 svg 元素中删除高度。

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #333;
}

#viewport {
  background: #FFF;
  transition: all 200ms;
  padding: 5px;
  position: relative;
  animation: sizing 8s infinite;
}

.column {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
  border: 1px dotted #000;
  max-height: 100%;
  max-width: 50%;
}

.svgContainer {
  flex: 1;
}

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


/* DEBUG */

#stopButton {
  position: fixed;
  right: 0;
  bottom: 0;
  font-size: 2em;
}

@keyframes sizing {
  0% {
    width: 300px;
    height: 200px;
  }
  25% {
    width: 500px;
    height: 200px;
  }
  50% {
    width: 500px;
    height: 400px;
  }
  75% {
    width: 300px;
    height: 400px;
  }
  100% {
    width: 300px;
    height: 200px;
  }
}

<div id="viewport">
  <div class="column">
    <h4>Some header</h4>
    <div class="svgContainer">
      <svg viewBox="0 0 300 214" width="300">
        <rect x="0" y="0"
          width="300" height="214" 
          stroke-width="5"
          stroke="#F00"
          rx="15" ry="15"
          fill="none"/>
         <circle cx="150" cy="107" r="80" stroke="#F00" stroke-width="5" fill="none"/>
    </svg>
    </div>
    <button style="flex-shrink: 0;">some button</button>
  </div>
</div>

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #333;
}

#viewport {
  background: #FFF;
  transition: all 200ms;
  padding: 5px;
  position: relative;
  overflow: auto;
  animation: sizing 8s infinite;
}

.column {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 10px 15px;
  border: 1px dotted #000;
  max-height: 100%;
  max-width: 50%;
  text-align: center;
}

.svgContainer {
  flex: 1;
}

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


/* DEBUG */

#stopButton {
  position: fixed;
  right: 0;
  bottom: 0;
  font-size: 2em;
}

@keyframes sizing {
  0% {
    width: 300px;
    height: 200px;
  }
  25% {
    width: 500px;
    height: 200px;
  }
  50% {
    width: 500px;
    height: 400px;
  }
  75% {
    width: 300px;
    height: 400px;
  }
  100% {
    width: 300px;
    height: 200px;
  }
}

<div id="viewport">
  <div class="column">
    <h4>Some header</h4>
    <div class="svgContainer">
      <svg viewBox="0 0 300 214" width="300">
        <rect x="0" y="0"
          width="300" height="214" 
          stroke-width="5"
          stroke="#F00"
          rx="15" ry="15"
          fill="none"/>
         <circle cx="150" cy="107" r="80" stroke="#F00" stroke-width="5" fill="none"/>
    </svg>
    </div>
    <button>some button</button>
  </div>
</div>