How to prevent flexbox from overflowing without explicit sizing

Given some aspect of browser size, this code-behind looks like this. With wider browser widths, the svg (vertical green lines with text "Top" and "Bottom") on the right overflows its flexbox at the top and bottom. I've tried various permutations of width / height: auto / 100% / min-content on various flex items, but didn't seem to hit the magic combination. Also, even with the Autoprefixer codep, browsers all interpret this differently (IE makes the SVG too small and doesn't extend it, Firefox pushes the header and footer off the page, and Chrome just overflows it).

Ideally, the result I would like to get is:

• the svg image should be as large as possible while maintaining its aspect ratio and not overflow into other content.
• three small divs (tables) on the left to flow vertically except when there is not enough space, then start flowing horizontally and svg pushing (actually shrinking it). (this goal is less important).

I tried to rip out the flexbox layout algorithm , but failed when one of the first things to know if it has a definite size and the definition of it is recursive, referencing and referencing definite

:

If a percentage will be allowed in relation to the main size of a flex item, and the flex item has some flex, and the flex container has a specific basic size, the basic size of flex items should be treated as defined for the purpose of percentage resolution, and the percentage should be allowed against the flex basic size of the flex item (that is, after the layout algorithm below has been completed for the flex container and flex item has reached its final size).

I went through the flexbox tutorial , and flexbox 5 minutes later , but their examples are relatively basic (and I realize I’m most likely just missing something very basic for my problem). If anyone can point out resources with more in-depth parsing of nested items in flexboxes, that would be appreciated (especially for those cases where items are not explicitly sized) .

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;
}