I developed a basic flex-based table.
section {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
margin: 0;
background-color: green;
}
h2, ul {
width: 50%;
padding-left: 1.5em;
padding-right: 1.5em;
}
h2 {
text-align: right;
vertical-align: middle;
}
h2 {
background-color: blue;
}
ul {
background-color: yellow;
}<section>
<h2>Heading</h2>
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
<li>baz</li>
<li>baz</li>
</ul>
</section>Initially, the h2 and ul elements do not occupy the full height of the section despite functioning this way in my local project. Why is this discrepancy?
The crux of the issue lies in vertically centering the text within the h2 block to fill the entire section. I intend to modify the background colors of the left and right cells distinctly. Even after setting the vertical-align property, it fails to achieve the desired effect. What could be causing this problem?