properly positioning svg's inline with div - inside parent div, how can it be done?

Question

I want to have a box (div) that fits its parents width, and its contents height. Inside that i want to display in the order:

• svg image
• div with content
• svg image (same but upside down)

I have set the outer div to have inline grid, and width 100%, but then the top svg falls beneath the div, or the div expands over the svg? (the overlap somehow). The bottom svg exceeds the over div, which should not be allowed.

If i remove 100% width of the outer div (the .card class), the items align correctly and doesn't overlap each other, but i need the 100% width somehow, is that possible?

Here is my attempt: jsFiddle

Styles

<style>
    .card {
        width: 100%;
        display: grid;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border: 1px solid rgba(0, 0, 0, 0.125);
        border-radius: 0.25rem;
    }

    .section {
        padding-top: 20px;
        padding-bottom: 20px;
        text-align-last: center;
        color: white;
        font-family: Arial, Helvetica, sans-serif;
        display: inline-grid;
    }

    .svg {
        max-width: 100%;
        height: auto;
        fill: #FFFF00;
    }

    .svgBottom {
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg); 
        transform: rotate(180deg);
    }

html

<div class='card'>
        <div class='section'>

            <svg class='svg' version='1.1' 
                id='spikes' 
                xmlns='http://www.w3.org/2000/svg' 
                xmlns:xlink='http://www.w3.org/1999/xlink' 
                viewBox='0 0 2000 150' 
                xml:space='preserve'>

                <path id='path' d='M2000 150L1000 0L0 150L2000 150Z'/>
            </svg>

            <div id='sectionDiv' style='background-color: red;'>
                <h1>Section 2</h1>
                <p>some content</p>
                <p>some content some content</p>
                <p>some content</p>
                <p>some content some content some content</p>
            </div>

            <svg class='svg svgBottom' version='1.1'
                xmlns='http://www.w3.org/2000/svg' 
                xmlns:xlink='http://www.w3.org/1999/xlink' 
                viewBox='0 0 2000 150' 
                xml:space='preserve'>

                <path id='path' d='M2000 150L1000 0L0 150L2000 150Z'/>
            </svg>
        </div>
    </div>

Wanted result:

Answer 1

Try this. I zeroed out the margins, removed the inline-grid which seems unnecessary amd set the SVG to display:block.

* {
  margin: 0
}

.card {
  width: 100%;
  display: grid;
  word-wrap: break-word;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 1);
  border-radius: 0.25rem;
}

.section {
  text-align: center;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.svg {
  max-width: 100%;
  height: auto;
  fill: #FFFF00;
  display: block;
  /* required*/
}

.svgBottom {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

<div class='card'>
  <div class='section'>

    <svg class='svg' version='1.1' id='spikes' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 2000 150' xml:space='preserve'>
				
					<path id='path' d='M2000 150L1000 0L0 150L2000 150Z'/>
				</svg>

    <div id='sectionDiv' style='background-color: red;'>
      <h1>Section 2</h1>
      <p>some content</p>
      <p>some content some content</p>
      <p>some content</p>
      <p>some content some content some content</p>
    </div>

    <svg class='svg svgBottom' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 2000 150' xml:space='preserve'>
				
					<path id='path' d='M2000 150L1000 0L0 150L2000 150Z'/>
				</svg>
  </div>
</div>

Answer 2

I suggest to use de flexbox system, add this code to your css:

.section {
    display: flex;
    flex-direction: column;
}
svg {
    height: 100%;
}