Выберите выпадающий текст

Question

Я использую reactJs для создания веб-приложения. Тем не менее, я пытался сделать выборочный дроу, но по какой-то причине его текст выглядит так:

(я не могу опубликовать изображение, потому что У меня недостаточно репутации)

Вот мой HTML внутри моего JS рендера

               <div className="results" id="order" onChange={(event) => this.handleSelect(event,"order")}>
                    <select id="order-select" defaultValue={Constants.NEWEST_PUBLICATION}>
                        <option disabled value={Constants.NO_ORDER}>{t('list.noOrder')}</option>
                        <option value={Constants.NEWEST_PUBLICATION}>{t('list.newest')}</option>
                        <option value={Constants.OLDEST_PUBLICATION}>{t('list.oldest')}</option>
                        <option value={Constants.ASCENDANT_ORDER}>{t('list.lowest')}</option>
                        <option value={Constants.DESCENDANT_ORDER}>{t('list.highest')}</option>                 
                    </select>
                    <h3 id="order-title-select">{t('list.order')}</h3>
                </div>

Вот CSS

.results {
    display: inline-block;
    width: 50%;
}

#order-title-select {
    margin-left: 20px;
    font-size: 16px !important;
    margin-top: 30px !important;
    float: right;
}

#order {
    float: right;
    font-size: 14px !important;
    width: 30%;
}

#order-title {
    float: left;
    margin-left: 20px;
    font-size: 25px !important;
    margin-top: 25px !important;
}


#order-select {
    margin-left: 8px;
    margin-top: 23px;
    border: 1px solid #FD8907;
    border-radius: 5px;
    color: #555;
    font-family: inherit;
    font-size: inherit;
    box-shadow: none;
    width: 40%; 
    float: right;
    margin-right: 15px;

}

#order-select option {
    font-size: 13px;
}

Любые идеи о том, как это решить?

Answer 1

Попробуйте добавить это в файл CSS;

select {
  height: fit-content;
}

или, если вы не можете использовать fit-content go с фиксированным значением

select {
  height: 100px; // adjust accordingly
}

Я догадываясь, ваш рост обрезается