Question

在某个浏览器尺寸比率下，this codepen如下图所示。在更宽的浏览器宽度下，右侧的svg（带有文本“Top”和“Bottom”的垂直绿线）从顶部和底部溢出其Flexbox。我尝试了各种宽度/高度的各种排列：各种弹性项目的自动/ 100％/ min内容，但似乎没有击中 magic 组合。此外，即使使用codepen的 Autoprefixer ，浏览器也会有不同的解释（IE使SVG太小而且不会扩展它，Firefox将页眉和页脚推离页面，而Chrome只是溢出它）

理想情况下，我喜欢的结果是：

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

我试图找到flexbox layout algorithm，但是当你需要知道的第一件事之一就是它的大小是definite时，它很难失败，并且它的定义是递归的＆安培;始终链接到definite：

如果要针对弹性项目的主要大小解决百分比，并且弹性项目具有明确的弹性基础，并且弹性容器具有明确的主要大小，则弹性项目的主要大小必须被视为明确的解决百分比的目的，百分比必须针对弹性项目的弹性主要大小进行解析（即，在完成Flex项目的弹性容器的布局算法之后，并且弹性项目已获得其最终大小）。

我已经阅读了guide to flexbox和flexbox in 5 minutes教程，但他们的示例相对基础（我意识到我可能只是遗漏了一些非常基本的问题）。 如果任何人都可以通过对Flexbox中嵌套项目进行更深入的处理来指向资源，那么我们将不胜感激（尤其是当项目未给出明确的大小时进行处理）。

Desired look

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将其父级的最大大小信息作为基础。

截至第二部分，我不确定你想要达到的目的。除了固定的断点之外，布局不能在行和列之间自由切换。

Answer 2

好吧，我确实设法或多或少地解决了我的问题：

添加：

display：flex;
身高：100％;

到#main，并且：

高度：计算（100％ - 6rem -2px）;

到#second_col

并删除：

align-items：center;

来自#main

根据浏览器高度让svg在其div内增长或扩展，并允许第一列在高度太小时换行。

更新了代码集here。

这仍然不是我想要的（当我切换到基于行的时候，我真的很喜欢推送第二列的第一列）。

如何在不提供明确尺寸

2 个答案: