htmlcssflexbox

Wrapping inline-flex container gets wrong width in Firefox. Any workaround?

I want to display form fields horizontally with label above fields, but for checkboxes I want to stack them 2&2. I place all consecutive checkboxes in a wrapping inline-flex container with flex-direction column and a fixed container height.

The wrapping itself works fine in both chrome and firefox, but firefox calculates the wrong width for the container. Looks like it includes only the 1st column. That means that whatever comes next will be placed on top of the checkbox container.

I can achieve this layout with some sort of table instead, but I'd also like to add/remove checkboxes dynamically without changing the page structure and for that the wrapping flex container would be ideal, if only it worked.

I assume this is a bug in Firefox, but when I google I find open issues that are years old, so getting it fixed is not a short-term solution. Instead I wonder if anyone knows any workaround.

Chrome:

enter image description here

Firefox:

enter image description here

.text-label {
    display: inline-flex;
    flex-direction: column;
}

.checkboxes {
    display:inline-flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 3rem;
}

.checkbox-label {

}
  <span class="text-label"><label for="before">Before</label><input type="text" id="before", name="before"></span>

  <span class="checkboxes">
    <span class="checkbox-label"><input type="checkbox" id="box1" name="box1" checked /><label for="box1">box1</label></span>
    <span class="checkbox-label"><input type="checkbox" id="box2" name="box2" checked /><label for="box2">box2</label></span>
    <span class="checkbox-label"><input type="checkbox" id="box3" name="box3" checked /><label for="box3">box3</label></span>
    <span class="checkbox-label"><input type="checkbox" id="box4" name="box4" checked /><label for="box4">box4</label></span>
    <span class="checkbox-label"><input type="checkbox" id="box5" name="box5" checked /><label for="box5">box5</label></span>
    <span class="checkbox-label"><input type="checkbox" id="box6" name="box6" checked /><label for="box6">box6</label></span>
  </span>

  <span class="text-label"><label for="after">After</label><input type="text" id="after", name="after"></span>

Solution

  • It's a bug in FF, and the same problem occurs when using CSS columns.

    You can use writing-mode: vertical-lr; to render the text vertically. This works for both Chrome and FF. Wrap everything with a flexbox so all parts would appear on the same row:

    .wrapper {
  display: flex;
  gap: 5px;
}

.text-label {
  display: inline-flex;
  flex-direction: column;
}

.checkboxes {
  writing-mode: vertical-lr;
  height: 3rem;
}

.checkbox-label {
  writing-mode: initial;
  vertical-align: bottom;
}
    <div class="wrapper">
  <span class="text-label"><label for="before">Before</label><input type="text" id="before", name="before"></span>

  <span class="checkboxes">
    <span class="checkbox-label"><input type="checkbox" id="box1" name="box1" checked /><label for="box1">box1</label></span>
  <span class="checkbox-label"><input type="checkbox" id="box2" name="box2" checked /><label for="box2">box2</label></span>
  <span class="checkbox-label"><input type="checkbox" id="box3" name="box3" checked /><label for="box3">box3</label></span>
  <span class="checkbox-label"><input type="checkbox" id="box4" name="box4" checked /><label for="box4">box4</label></span>
  <span class="checkbox-label"><input type="checkbox" id="box5" name="box5" checked /><label for="box5">box1234567</label></span>
  <span class="checkbox-label"><input type="checkbox" id="box6" name="box6" checked /><label for="box6">box6</label></span>
  </span>

  <span class="text-label"><label for="after">After</label><input type="text" id="after", name="after"></span>
</div>