Cascading Flexboxes

Cascading Flexboxes
0

I am trying to use a flexbox inside a flexbox. Until now I managed to create 3 boxes that are working fine. The first box is supposed to contain my menu, the second box my application fields and the third box will have error messages and help texts. But my problem is the second box. Inside this box I need to have at least 4 more boxes to place field labels and input fields for my application.

So far, everything I tried has no effect on what I can see on the screen. Could anyone advice how to change the css to allign labels and fields in box 2?

Thanks in advance
Uwe

Hey Uwe,

It’s a lot easier for us to help if you can link us to the code you are trying to fix :slight_smile: It’s often hard to debug something without being able to play with it ourselves.

Hi Dan/Pagey,

I would certainly provide the code if there would be any. Like I said, I am using Flexbox from the tutorial and it is working fine. Next step would be to adjust a label and an input field inside that Flexbox. But whatever I try does not change anything. I certainly do not want to use

to adjust the 4 columns inside a Flexbox. I am still trying to make something work that I can start with my developments.

The code I copied from the tutorial so far looks like this:

<div class="call-outs-container">
  <div class="Box">
    <h4>Application</h4>
      <form action="">
        <div class="form-row">
          <label for="name"Name:</label>
          <input type="text" id="name">
        </div>

        <div class="form-row">
          <label for="favColor">Favorite Color:</label>
          <input type="text" id="favColor">
        </div>
      </form>
    </div>
  </div>

This is a manual copy of the code. Even though it can contain errors. The original code does not have any errors.

The question is just how to align labels and fields inside of that Flexbox

Thanks a lot
Uwe