what's wrong with my flexbox ? I try to use column on form element

Question

this is what i would like to get:

┌─────┐┌─────┐
│  A  ││     │
└─────┘│     │ 
┌─────┐│  B  │ 
│  C  ││     │
└─────┘│     │
       └─────┘

what I have done:

form {
  display        : flex;
  flex-direction : column;
  flex-wrap      : wrap;
  height         : 14em;
  }
fieldset { 
  display : block;
  margin  : 1em .6em;
  }
fieldset:nth-child(2) {
  order      : 2;
  flex-basis : 10em;
  }

<form action="" id="my-form">
  <fieldset>
    <legend> -A- </legend>
    <input type="text">
  </fieldset>
  <fieldset>
    <legend> -B- </legend>
    <input type="text">
  </fieldset>
  <fieldset>
    <legend> -C- </legend>
    <input type="text">
  </fieldset>
</form>

[edit] As you can see there is no error in this code, my initial problem is due to the improper installation of Firefox on my computer. I didn't know it when I asked this question.
I can't delete it (due to one answer with upvotes)

Does this answer your question? [Using flex to achieve two rows and one column layout](https://stackoverflow.com/questions/53707051/using-flex-to-achieve-two-rows-and-one-column-layout) — Awais, Feb 07 '20 at 14:39

Johannes · Answer 1 · 2020-02-07T15:09:07.303

4

You need to add a height setting for the container, otherwise the items won't wrap, but stack, since the container height by default adjusts to the contents:

form {
  display: flex;
  flex-direction: column;
  flex-wrap:wrap;
  height: 10em;
}

fieldset { 
  display:block;
  margin-top: 1em;
  width:12em; 
}
 fieldset:nth-child(2) {
  flex:1;
  order:2;
  height:20em;
 }

<form action="" id="my-form">
  <fieldset>
    <legend> -A- </legend>
    <input type="text">
  </fieldset>
  <fieldset>
    <legend> -B- </legend>
    <input type="text">
  </fieldset>
  <fieldset>
    <legend> -C- </legend>
    <input type="text">
  </fieldset>
</form>

edited Feb 07 '20 at 15:09

answered Feb 07 '20 at 14:38

Johannes

64,305
18
73
130

I *am* using Firefox and it works here. You just have to find a height vlaue that fits your particular situation - either by trial and error, or by giving fixed heights to all elements and calculate the necessary container height accordingly. – Johannes Feb 07 '20 at 15:03
Then you need a higher height value. – Johannes Feb 07 '20 at 15:07
On the container (`form`), where I had added `height: 10em` – Johannes Feb 07 '20 at 15:11
hmm - something must be different in your actual code... – Johannes Feb 07 '20 at 15:15
In the snippet here it looks okay: Two columns, A and C stacked on the left, B on the right side – Johannes Feb 07 '20 at 15:22

what's wrong with my flexbox ? I try to use column on form element

1 Answers1