How to expand element to end of overflow

Question

I have would like to dynamically tile elements an inline container, so I used inline-flex but it overflows instead of extending the container.

Here's what I see:

and here's what I want to see:

I can't use regular flex because that adds unwanted newlines.
Is it possible to extend an overflowing span element? If not, is there a workaround to inline-flex that I can use to get a similar result? (a bit off topic: how do I then center this flexbox?)

Here's a fiddle to play around with

body {
  writing-mode: vertical-rl;
}

.radicals {
  font-size: 3.2em;
}

.strokes {
  text-align: center;
  writing-mode: horizontal-tb;
  margin-bottom: -1.5em;
}

.entry {
  font-size: 1em;
  display: grid;
  grid-template-areas: "strokes kanji reading";
  justify-content: start;
}

.kanji {
  font-size: 2em;
  margin-bottom: -0.4em;
}

.variants {
  display: inline-flex;
  max-width: 1em;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  //border: solid 2px blue;
}

.variant {
  width: 1em;
  font-size: 0.42em;
  //border: solid 1px red;
}

.reading {
  grid-area: reading;
}

<body>
  <div id=content>

    <div class="entry">
      <span class="strokes">16</span>
      <span id=劔 class=kanji>【劔<span class=variants>
<span class=variant href="#剣">剣</span>
      <span class=variant href="#劍">劍</span>
      <span class=variant href="#劒">劒</span>
      <span class=variant href="#剱">剱</span>
      <span class=variant href="#釼">釼</span>
      </span>】</span>
      <span class=reading style="grid-area:reading;">
<span>ケン</span> (검)<br />
      <span>つるぎ</span> <br /></span>
    </div>

    <div class="entry">
      <span class="strokes">5</span>
      <span id=世 class=kanji>【世<span class=variants>
<span class=variant href="#丗">丗</span>
      <span class=variant href="#卋">卋</span>
      </span>】</span>
      <span class=reading style="grid-area:reading;">
<span>セイ・セ・ソウ</span> (세)<br />
      <span>よ</span> <br />
      <span>㊔とし・ゆ・ゆき</span></span>
    </div>

    <div class="entry">
      <span class="strokes">4</span>
      <span id=丑 class=kanji>【丑<span class=variants>
</span>】</span>
      <span class=reading style="">
<span>チュウ</span> (축･추)<br />
      <span>うし</span> <br />
      <span>㊔ひろ</span></span>
    </div>

    <div class="entry"><span class="strokes">3</span>
      <span id=万 class=kanji>【万<span class=variants>
<span class=variant href="#萬">萬</span>
      </span>】</span>
      <span class=reading style="grid-area:reading;">
<span>マン・バン</span> (만･묵)<br />
      <span>よろず</span> <br />
      <span>㊔かず・ま・ゆる</span></span>
    </div>

  </div>
</body>

I think you're encountering a known flaw with flex `column wrap`. https://stackoverflow.com/q/33891709/3597276 — Michael Benjamin, Sep 14 '20 at 01:23
@MichaelBenjamin thanks for the link! Setting it to `inline-grid` does fix it, but now I can't center the last row. I changed the inline-flex `writing-mode: horizontal-tb;` so that the bug doesn't show up, but now I get an extra new line that I don't want… https://jsfiddle.net/35ypgr7v/ — əkaunt, Sep 14 '20 at 04:23

How to expand element to end of overflow

0 Answers0