break-after: avoid; equivalent in flex - css

Question

I'm trying to make some kind of dictionary with flex. My elements are added from top to bottom then left to right (the flex element .dictionary grows on the right instead of the bottom. My .dic-entry entries stay coherent/together because they are each wrapped in an <article> tag. However, between them, there are "letter titles" .dic-letter-title and they should stay together with the next .dic-entry.
In a column layout I would do break-after: avoid, how could I achieve this effect with flex elements?
IMPORTANT EDIT: To clarify, I'm able to circumvent the problem and make the result look exactly as I want. However I'm looking for a semantically-correct solution. Not one where I have to wrap two element together with a meaningless element for example.
EDIT: As #Nisha suggested in the comment I could wrap .dic-letter-title and the first .dic-entry in a container, however I'd like to avoid doing that as it is not semantically correct. If I wanted to add a semantically-correct container, it would have to be around all the dic-entry sharing the same first letter, but then they would form a bloc and I don't want that either.
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%
}
body, main, article {
display: flex;
flex-flow: column;
}
main {
flex: 1 0 100%;
}
main, .container {
min-height: 0;
}
.dictionary {
display: flex;
flex-flow: column wrap;
align-content: flex-start;
overflow-x: scroll;
}
.dic-letter-title {
/* DEBUG: This isn't working */
break-after: avoid;
color: red;
}
.dic-entry, .dic-entry * {
display: block;
padding: 0;
}
.dic-entry * {
margin: 0;
}
.dic-entry {
width: 16ch;
padding: 0 2.5em 1.5em 0;
}
<article class="container">
<section class="dictionary small-text">
<h3 class="dic-letter-title">Aa</h3>
<article class="dic-entry"><h4>Aliquam consequat</h4>
<p>Aliquam consequat vestibulum magna nec consequat.</p></article>
<article class="dic-entry"><h4>Aliquam fermentum</h4>
<p>Aliquam fermentum quis arcu vitae maximus.</p></article>
<h3 class="dic-letter-title">Ll</h3>
<article class="dic-entry"><h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></article>
<h3 class="dic-letter-title">Mm</h3>
<article class="dic-entry"><h4>Mauris blandit</h4>
<p>Mauris blandit, enim a aliquam convallis, felis turpis ultricies dolor, in blandit velit lorem at nulla.</p></article>
<h3 class="dic-letter-title">Pp</h3>
<article class="dic-entry"><h4>Pellentesque habitant</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></article>
<article class="dic-entry"><h4>Phasellus</h4>
<p>Phasellus in bibendum nisi.</p></article>
<h3 class="dic-letter-title">Uu</h3>
<article class="dic-entry"><h4>Quisque nec eros</h4>
<p>Quisque nec eros quis orci venenatis porttitor vitae sed nunc.</p></article>
<h3 class="dic-letter-title">Uu</h3>
<article class="dic-entry"><h4>Sed vulputate</h4>
<p>Sed vulputate id orci sed maximus.</p></article>
</section>
</article>
EDIT: I tried #zangab's solution of using list which mases sense semantically. However, now the "letter-group" title is solidary with what comes next, however now it's the whole letter-group can't wrap because the li can't be broken.
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%
}
body, main, article, .disc-entry {
display: flex;
flex-flow: column;
}
main {
flex: 1 0 100%;
}
main, .container {
min-height: 0;
}
.dictionary {
display: flex;
flex-flow: column wrap;
align-content: flex-start;
overflow-x: scroll;
}
.dictionary li {
list-style-type: none;
}
.dic-letter-title {
/* DEBUG: This isn't working */
break-after: avoid;
color: red;
}
.dic-entry, .dic-entry * {
display: block;
padding: 0;
}
.dic-entry * {
margin: 0;
}
.dic-entry {
width: 16ch;
padding: 0 2.5em 1.5em 0;
}
<article class="container">
<ul class="dictionary small-text">
<li class="dic-letter">
<h3 class="dic-letter-title">Aa</h3>
<ul>
<li class="dic-entry">
<h4>Aliquam consequat</h4>
<p>Aliquam consequat vestibulum magna nec consequat.</p>
</li>
<li class="dic-entry">
<h4>Aliquam fermentum</h4>
<p>Aliquam fermentum quis arcu vitae maximus.</p>
</li>
</ul>
</li>
<li class="dic-letter">
<h3 class="dic-letter-title">Ll</h3>
<ul>
<li class="dic-entry">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
</ul>
</li>
<li class="dic-letter">
<h3 class="dic-letter-title">Mm</h3>
<ul>
<li class="dic-entry">
<h4>Mauris blandit</h4>
<p>Mauris blandit, enim a aliquam convallis, felis turpis ultricies dolor, in blandit velit lorem at nulla.</p>
</li>
</ul>
</li>
<li class="dic-letter">
<h3 class="dic-letter-title">Pp</h3>
<ul>
<li class="dic-entry">
<h4>Pellentesque habitant</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</li>
<li class="dic-entry">
<h4>Phasellus</h4>
<p>Phasellus in bibendum nisi.</p>
</li>
</ul>
</li>
<li class="dic-letter">
<h3 class="dic-letter-title">Qq</h3>
<ul>
<li class="dic-entry">
<h4>Quisque nec eros</h4>
<p>Quisque nec eros quis orci venenatis porttitor vitae sed nunc.</p>
</li>
</ul>
</li>
<li class="dic-letter">
<h3 class="dic-letter-title">Uu</h3>
<ul>
<li class="dic-entry">
<h4>Sed vulputate</h4>
<p>Sed vulputate id orci sed maximus.</p>
</li>
</ul>
</li>
</ul>
</article>

Answer 1

have a look here:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%
}
body, main, article {
display: flex;
flex-flow: column;
}
main {
flex: 1 0 100%;
}
main, .container {
min-height: 0;
}
.dictionary {
display: flex;
flex-flow: column wrap;
align-content: flex-start;
overflow-x: scroll;
list-style-type: none;
}
.dic-letter-title {
color: red;
}
.dic-entry, .dic-entry * {
display: block;
padding: 0;
}
.dic-entry * {
margin: 0;
}
.dic-entry {
width: 16ch;
padding: 0 2.5em 1.5em 0;
}
<article class="container">
<ul class="dictionary small-text">
<li>
<h3 class="dic-letter-title">Aa</h3>
<article class="dic-entry">
<h4>Aliquam consequat</h4>
<p>Aliquam consequat vestibulum magna nec consequat.</p>
</article>
<article class="dic-entry">
<h4>Aliquam fermentum</h4>
<p>Aliquam fermentum quis arcu vitae maximus.</p>
</article>
</li>
<li>
<h3 class="dic-letter-title">Ll</h3>
<article class="dic-entry">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
</li>
<li>
<h3 class="dic-letter-title">Mm</h3>
<article class="dic-entry">
<h4>Mauris blandit</h4>
<p>Mauris blandit, enim a aliquam convallis, felis turpis ultricies dolor, in blandit velit lorem at nulla.
</p>
</article>
<li>
<h3 class="dic-letter-title">Pp</h3>
<article class="dic-entry"><h4>Pellentesque habitant</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></article>
<article class="dic-entry"><h4>Phasellus</h4>
<p>Phasellus in bibendum nisi.</p></article></li>
<li>
<h3 class="dic-letter-title">Uu</h3>
<article class="dic-entry"><h4>Quisque nec eros</h4>
<p>Quisque nec eros quis orci venenatis porttitor vitae sed nunc.</p></article></li>
<li>
<h3 class="dic-letter-title">Uu</h3>
<article class="dic-entry"><h4>Sed vulputate</h4>
<p>Sed vulputate id orci sed maximus.</p></article></li>
</ul>
</article>