I have the following set of divs inside a div that I want to stack vertically. However the text in the last div seems to be stacking on top of the div in the second section when I wanted them to stack vertically so the text in the third dive appears below the graph. I'm not sure why display: flex and flex-direction: column; aren't making the divs behave as intended.
var width = 710, height = 710;
var margin = {top: -20, right: 30, bottom: 40, left: 40};
d3.select("canvas").attr("width", width).attr("height", height);
var canvas = d3.select("canvas");
var context = canvas.node().getContext("2d");
var svg = d3.select("#app")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var xAxis = d3.scaleLinear()
.domain([-1.5, 1.5])
.range([0, width]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xAxis));
var yAxis = d3.scaleLinear()
.domain([-1.5, 1.5])
.range([height, 0]);
svg.append("g")
.call(d3.axisLeft(yAxis));p {
font-size: 2.7vmin;
line-height: 1.8;
text-align: left;
/*color: white; */
}
button {
display: inline;
margin-left: 2rem;
}
.simBlock {
display: flex;
flex-direction: column;
}
svg {
position: absolute;
}
canvas {
position: absolute;
}
#section {
display: flex;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="simBlock">
<div id="section">
<button type="button" id="pauseButton">Play/Pause</button>
<button type="button" id="resetButton">Reset</button>
</div>
<div id="section">
<canvas></canvas>
<svg id="app"></svg>
</div>
<div id="section">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores, minus deleniti. Quia consectetur laboriosam aperiam inventore, suscipit id iusto neque culpa? Perferendis mollitia corporis saepe aspernatur enim necessitatibus voluptatibus earum.
</p>
</div>
</div>