CODEWITHSUNDEEP
htmlcssflexbox
Simone
Simone

Reputation: 2430

I do not know why Flexbox items stretch

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

enter image description here

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

enter image description here

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:

enter image description here

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!

enter image description here

Can anyone helps me to reach my purpose please?

UPDATE

With your solutions, now I obtain this:

enter image description here

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?

Upvotes: 0

Views: 128

Answers (1)

souptical
souptical

Reputation: 42

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

Upvotes: 1

Related Questions