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:

Firefox:

.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>

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:

Firefox:

.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>

• html
• css
• flexbox

Share Improve this question Follow edited Mar 26 at 12:57 C3roe 96.7k1515 gold badges9898 silver badges170170 bronze badges asked Mar 26 at 12:49 Guttorm VikGuttorm Vik 5366 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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>