垂直对齐内联，内联块和块元素

Question

I have dynamically rendered elements that I need to align vertically. I only have editing control over the parent.

The elements don't have any white space or line break inbetween them.

I have tried with flex , but the block items contract. I have added a style attribute on the block elements to examplify this:

 .parent { display: flex; flex-direction: column; align-items: flex-start; } 

 <div class="parent"> <span>ITEM1</span><span>ITEM2</span><div style="background:pink;">ITEM3</div><div style="background:pink;">ITEM4</div><button>ITEM5</button><button>ITEM6</button> </div> 

Answer 1

As per Temani Afif's comment , the following is a working solution:

 .parent { display: flex; flex-direction: column; align-items: flex-start; } /* Setting all common block elements to width: 100% */ .parent > div, .parent > h1, .parent > h2, .parent > h3, .parent > h4, .parent > h5, .parent > h6 .parent > ol, .parent > ul, .parent > pre, .parent > address, .parent > blockquote, .parent > dl, .parent > fieldset, .parent > form, .parent > hr, .parent > noscript, .parent > table { width:100% } 

 <div class="parent"> <span>ITEM1</span><span>ITEM2</span><div style="background:pink;">ITEM3</div><div style="background:pink;">ITEM4</div><button>ITEM5</button><button>ITEM6</button> </div>