html - 如何在不给出明确尺寸的情况下防止 flexbox 溢出

Question

在一定的浏览器大小比例下，this codepen看起来像下图。在更宽的浏览器宽度下，右侧的 svg(带有文本“Top”和“Bottom”的垂直绿线)溢出其 flexbox 从顶部和底部。我在各种 flex 元素上尝试了宽度/高度的各种排列:auto/100%/min-content，但似乎没有达到 magic 组合。此外，即使使用 codepen 的 Autoprefixer，浏览器也会对此做出不同的解释(IE 使 SVG 太小并且不会扩展它，Firefox 将页眉和页脚推离页面，而 Chrome 只是溢出它) .

理想情况下，我希望的结果是:

• svg 图像尽可能大，同时保持其纵横比，并且不会溢出到其他内容中。
• 左边的三个小 div(表格)垂直移动，除非没有足够的空间，然后开始水平移动并推 svg(有效地使其变小)。 (这个目标不太重要)

我试图理解 flexbox layout algorithm , 但当人们首先需要知道的事情之一是它是否有 definite 时，就惨败了。大小，其定义通过引用和链接到 definite 是递归的:

If a percentage is going to be resolved against a flex item’s main size, and the flex item has a definite flex basis, and the flex container has a definite main size, the flex item’s main size must be treated as definite for the purpose of resolving the percentage, and the percentage must resolve against the flexed main size of the flex item (that is, after the layout algorithm below has been completed for the flex item’s flex container, and the flex item has acquired its final size).

我已经完成了 guide to flexbox , 和 flexbox in 5 minutes教程，但他们的示例相对基本(我意识到我可能只是缺少一些非常基本的问题)。 如果有人可以指出对 flexbox 中的嵌套元素进行更深入处理的资源，那将不胜感激(尤其是当元素没有给出明确尺寸时的处理)。

HTML:

<div id="header">
  <div>Header</div>
</div>
<div id="main">
  <div id="first_col">

    <div class="wrapper">
      <table>
        <thead>
          <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>some</td>
            <td>content</td>
            <td>here</td>
          </tr>
          <tr>
            <td>some</td>
            <td>content</td>
            <td>here</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="wrapper">
      <table>
        <thead>
          <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>some</td>
            <td>content</td>
            <td>here</td>
          </tr>
          <tr>
            <td>some</td>
            <td>content</td>
            <td>here</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="wrapper">
      <table>
        <thead>
          <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>some</td>
            <td>content</td>
            <td>here</td>
          </tr>
          <tr>
            <td>some</td>
            <td>content</td>
            <td>here</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
  <div id="second_col">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 1800" preserveAspectRatio="xMidYMid meet">
      <defs>

        <rect id="dummy_content" height="1740" width="30" rx="5" ry="5" style="fill:green; stroke-width:2; stroke:#696969" />

      </defs>
      <use xlink:href="#dummy_content" x="168" y="30" />
      <use xlink:href="#dummy_content" x="576" y="30" />
      <use xlink:href="#dummy_content" x="984" y="30" />
      <use xlink:href="#dummy_content" x="1392" y="30" />
      <text font-size="100" fill="red" text-anchor="middle" alignment-baseline="middle" x="900" y="100">Top</text>
      <text font-size="100" fill="red" text-anchor="middle" alignment-baseline="middle" x="900" y="1700">Bottom</text>
    </svg>
  </div>
</div>
<div id="footer">Footer</div>

CSS:

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  border: 1px solid black;
}

#header,
#main,
#footer {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  justify-items: center;
  align-items: center;
  border: 2px solid green;
}

#header {
  flex: 0 0 auto;
  height: 3rem;
}

#main {
  flex: 1 1 auto;
  flex-flow: row wrap;
}

#footer {
  flex: 0 0 auto;
  height: 3rem;
}

svg {
  border: 1px solid black;
}

#first_col,
#second_col {
  display: flex;
  flex-flow: column wrap;
}

#first_col {
  flex: 0 1 auto;
  justify-content: space-around;
}

#second_col {
  flex: 1 1 auto;
}

.wrapper {
  margin: 1rem;
}

Answer 1

我设法以某种方式完成了你问题的第一部分:

Codepen

包含 SVG 的关键是使用 position: absolute 重置其行为并添加 align-self: stretch; 到其父级，因此 SVG 具有最大尺寸其父级的信息作为基础。

截至第二部分，我不确定您想要实现什么。布局不能在行和列之间自由切换，除非有固定的断点。