I do not know why Flexbox items stretch

Question

I am using flexbox, but I don't know the items stretch. I would like to obtain this result:

The content items are justified and they wrap when the space of the content ends. Like this:

Items are DIV that contains labels and input elements. So I want that the whole dive wrap and the labels are not separated by the inputs.

Here the HTML:

<tr class="form_boxes">
    <td colspan="3">
        <div class="">
            <span class="">NPA</span>
            <input type="text" ng-model="np.npa" maxlength="5" class="char_5" />
        </div>
        <div class="">
            <span>NXX</span>
            <input type="text" ng-model="np.nxx" />
        </div>
        <div class="">
            <span>ISO</span>
            <input type="text" ng-model="np.iso" maxlength="5" class="char_5" />
        </div>
        <div class="">
            <span>Descrizione</span>
            <input type="text" ng-model="np.descrizione" />
        </div>
        <div class="">
            <span>Location</span>
            <input type="text" ng-model="np.location" />
        </div>
        <div class="">
            <span>Root</span>
            <input type="text" ng-model="np.root" />
        </div>
        <div class="">
            <span>Billing ID</span>
            <input type="text" ng-model="np.billingId" />
        </div>
        <div class="">
            <span class="no-wrap">Ultimo aggiornamento: {{ np.ultimoUpdate }}</span>
        </div>
    </td>
</tr>

and here the CSS:

#internal_content .form_boxes { 
    width:500px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
    align-content: flex-start;

    }

#internal_content .form_boxes td {
    width: 100%;
}

I also would like to remove the fixed size of the TR... This is the result I obtain:

As you can see, the TR size is ok... and the TD size so (trust me please). The problem is that also the DIVs stretch, but I do not know why!

Can anyone helps me to reach my purpose please?

UPDATE

With your solutions, now I obtain this:

Also the last line is justified... It should be like the first image I posted instead.. Do I have to create a new parent flex box?

If you're gonna use flexbox there's really no need to use a table too! — Paulie_D, Oct 13 '16 at 08:26

score 1 · Accepted Answer · edited May 23 '17 at 10:27

1

You are using your flexbox on the parent of the divs so the td, your class should be on the td element so the divs are affected

#internal_content .form_boxes td { 
    width:500px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
    align-content: flex-start;
}

and remove the width that should do it

Also the divs stretch because they are block elements and block elements by default always have full width unless you declare it otherwise

and this was also part of the solution for the question

Flex-box: Align last row to grid

edited May 23 '17 at 10:27

Community

1
1

answered Oct 13 '16 at 08:17

souptical

42
9

1

@Ciccio is it neccesary for it to have width 500px? Because I think it doesnt have the space for it to fit all of it in two rows – souptical Oct 13 '16 at 11:26
I removed the width:500px... however, the problem is not the number of rows, but the las line is justified too.. I would like it stops on the left... I do not know if I explained good.. I mean "ultimo aggiornamento", should be near the tectbox of the billing id... not at the end of the line – Simone Oct 13 '16 at 11:58
Add a parent to the last elements that you want to the left – souptical Oct 13 '16 at 12:01
I have added... but nothing changed... do I have to add some style too? – Simone Oct 13 '16 at 12:04
Can you update the html code in the question or put it up in jsfiddle? So I can try – souptical Oct 13 '16 at 12:08
I have solved with this solution: http://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid – Simone Oct 13 '16 at 12:11

I do not know why Flexbox items stretch

1 Answers1