I am looking to create a vertical list where each row adjusts its width to perfectly fit its content, instead of expanding to fill the container as a default div does.
The goal is to accomplish this with just one HTML element for each row, without any additional wrapping divs needed.
An approach that achieves this has been discovered, but unfortunately, it appears to be incompatible with Safari (a possible bug?).
.container {
margin: 10px;
border: 2px solid #999;
padding: 5px;
display: flex;
flex-direction: column;
width: 300px
}
.row-item {
padding: 5px;
margin: 5px;
border: 1px solid green;
/* This CSS property will adjust the width based on inner content in Chrome and Firefox, but not in Safari */
// Add line here if needed
}<div class='container'>
<div class='row-item'>Item #1</div>
<div class='row-item'>Another Item...</div>
<div class='row-item'>Item No. 3</div>
</div>To view the code in action, follow this link to the Codepen: http://codepen.io/anon/pen/woKYqx
While there are straightforward solutions involving adding extra HTML elements and using display: inline-block, the objective here is to explore ways to address the issue using only a single HTML element per row. The layout itself is relatively simple.
Is there a universal method available to achieve this while maintaining one HTML element for each row?