Flex-basis not working when setting it for a Select dropdown

Question

Have a flex container with flex-direction: row. And each of those individual columns are again flex containers with a flex-direction: column.

Have a few form-inputs in the flex row, but when I try to give the Location select a initial flex-basis: 250px, it doesn't work and it applies it vertically.

But, I can't find a way to make it apply it horizontally.

    <div class="row">
        <div class="column input-container location">
              <label for="location">Location</label>
              <select name="location">
                <option *ngFor="let location of locations" [value]="location.locationId">
                  {{location.locationName}}
                </option>
              </select>
            </div>
        </div>

//styling

.row {
        display: flex;
        flex-direction: row;
        // flex-wrap: wrap;
    }
    .column {
        display: flex;
        flex-direction: column;
    }

    .location select {
    flex-basis: 250px;
}

Here's the link to it running in a stackbliz, https://stackblitz.com/edit/angular-vr4cya

score 0 · Accepted Answer · answered Oct 07 '18 at 00:49

The flex-basis property applies to the main axis of a flex container.

This means that in flex-direction: row it controls width, and in flex-direction: column in controls height.

If you're in flex-direction: column and need to set a flex item's width, then use the width property.

.additional-assignment[_ngcontent-c0] .location[_ngcontent-c0] select[_ngcontent-c0] {
    /* flex-basis: 250px; */
    width: 250px; /* new */

More details:

Flex-basis not working when setting it for a Select dropdown

1 Answers1