css - 将Flex-basis设置为Select下拉列表时不起作用

有一个带有flex-direction：行的flex容器。而且这些单独的列中的每一个都是具有flex-direction：列的flex容器。

flex行中有一些表单输入，但是当我尝试给Location选择一个初始flex-basis时：250px，它不起作用，并且垂直应用它。

但是，我找不到使它水平应用的方法。

    <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>

//样式

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

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

这是在stackbliz中运行的链接，https://stackblitz.com/edit/angular-vr4cya

最佳答案

flex-basis属性适用于flex容器的主轴。

这意味着在flex-direction: row中控制宽度，在flex-direction: column中控制高度。

如果您位于flex-direction: column中并且需要设置弹性项目的宽度，请使用width属性。

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

关于css - 将Flex-basis设置为Select下拉列表时不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52684389/