Div не расширяется по ширине внутреннего содержимого ⇐ Html

[Anonymous]

На моей html-странице есть контейнер, левый и правый div. Левый и правый div заключены в контейнер, имеющий ширину 20% и 80% соответственно.

Проблема

В #right div у меня есть набор полей, ширина которого установлена ​​как auto. Этот набор полей содержит два HTML-элемента класса .form-label и .form-input, оба имеют одинаковую ширину 48%. Проблема в том, что если одна из моих меток имеет большой текст (не больше, чем пространство, доступное в правом div и с учетом всех правил), то набор полей расширяется только до определенной ширины, и после этого моя метка и элемент ввода вместо того, чтобы оставаться на одной строке, перемещаются в две разные строки. Это происходит, даже если еще есть место для расширения div.

Примечание. Я хочу отметить, что хотя проблема применима как к Firefox, так и к Chrome, она более заметна в Chrome даже при средней длине текста, как показано в примере.

Вот код: [Чтобы понять проблему, посмотрите вывод в полноэкранном режиме]

Код: Выделить всё

.container
{
box-sizing: border-box;
max-width: 100%;
position:relative;
float:bottom;
height: 100%;
margin: 6rem 0 1.5rem 0;
overflow-x: auto;
clear: both;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap:nowrap;
flex-basis:0;
align-items:stretch;
justify-content: center;

}

#left{
margin: 0;
width:20%;
padding: 4px 4px 4px 4px;
color: #000011;
font-weight:bold;
text-align: center;
order:0;
flex-order: 0;
-webkit-order: 0;
-ms-flex-order: 0;
align-self:stretch;
}

#right{
margin-top: 0;
width: 80%;
padding: 4px 4px 4px 6px;
text-align: center;
flex-order: 1;
order:1;
-webkit-order: 1;
-ms-flex-order: 1;
align-self:stretch;
overflow: auto;
}
.form{
text-align:right !important;

}

.form-input{
width:48%;
margin-left:0.5rem !important;
margin-bottom: 0.5rem !important;
vertical-align: middle;
display: inline-block;
text-align: left;
}
.form-label{
width:48%;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
vertical-align: super ;
}
.form-button{
width:auto;
margin-top: 1rem;
}

fieldset{
width: auto;
max-width: 100%;
display:inline;
margin: 1rem auto 2rem auto;
border-radius: 0.5rem;
border: 3px double #000000;
}

Код: Выделить всё

blah blah balah blah blah.......


Defaulter List Selection

Select Semester
------IIIIIIIVVVIVIIVIII                

From (Month)
------July            

Cut-Off Percentage........................

Я просмотрел различные сообщения, но не смог найти решение.

Надеюсь, кто-нибудь мне поможет.

Заранее благодарю за любую помощь.

ОБНОВЛЕНИЕ

Пусть Я подробно объясню, что именно происходит.

Ширина контейнера #right составляет 1071 пиксель в полноэкранном режиме. fieldset, который является контейнером элементов формы в #right div, является встроенным элементом, потому что я не хочу, чтобы он занимал полноэкранный режим, но на случай, если у него так много содержимого. Следовательно, набор полей может занимать максимальную ширину 100%. Теперь общая ширина набора полей распределяется поровну между .form-input и .form-label (а именно ширина: 48%). Оба упомянутых элемента заключены в div, которому не присвоено никакого свойства CSS, кроме overflow:hidden;'. Следовательно, учитывая ширину 1066 пикселей, каждый из.form-input

Код: Выделить всё

and '.form-label

должен иметь максимальную ширину 511 пикселей. Но в моем случае этого не происходит.

Если вы видите данный пример в полноэкранном режиме. Вы обнаружите, что даже если в #right div доступно 1066 пикселей. Моя метка процент отсечения... занимает всего 272 пикселя, а соответствующий ввод — около 229 пикселей. Эти два элемента отображаются в двух разных строках, хотя они должны находиться в одной строке. Также сумма их ширины+полей+отступов+границ=524 пикселей, что намного меньше общего доступного пространства, т. е. 1066 пикселей. Даже если я добавлю отступы, поля и границы набора полей, общая ширина составит 550 пикселей.

Поэтому мой вопрос заключается в том, почему набор полей не расширяется в соответствии с шириной его внутреннего содержимого и что я могу сделать, чтобы преодолеть это, не мешая макету моего сайта.

Примечание: я не хочу, чтобы метка разбивалась на отдельную строку, поэтому display:inline-block; в данном случае не подойдет. Я также пытался установить white-space:nowrap, но это привело к усечению моей строки, т. е. она продолжает течь вправо, пока не будет скрыта входным элементом справа.

min-width

Код: Выделить всё

and

max-width` удалены, поскольку они не служат никакой цели, как я понял при обсуждении проблемы с @Ankush[/b]

Подробнее здесь: https://stackoverflow.com/questions/386 ... tent-width