Первый ребенок игнорирует ширину и высоту ⇐ Html

[Anonymous]

У меня действительно простой угловой проект с кодом HTML и SCSS. В контейнере у меня есть 2 объекта, которые я позиционирует с помощью Flexbox. Все работало нормально со вторым объектом, но первый просто не работает.

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

Test

Test

< /code>
и вот мой scss: < /p>
.Player {
position: relative;
width: 80%;
margin: auto;
p {
border: 1px solid rgba($color: #000000, $alpha: 0.3);
font-size: 20px;
padding: 16px;
height: 500px;
}

.lineTwo {
font-size: 15px;
display: flex;
position: absolute;
&:first-child {
left: 0;
width: 50%;
}
&:last-child {
right: 0;
justify-content: center;
width: 50%;
}
}
}
< /code>
Я хочу, чтобы как ввод, так и кнопку имели ширину, но я не хочу, чтобы оба имели то же самое с.
Если я напишу это так: < /p>
.lineTwo {
font-size: 15px;
display: flex;
position: absolute;
width: 50%;
&:first-child {
left: 0;
}
&:last-child {
right: 0;
justify-content: center;
}
}
}
< /code>
... Это работает очень хорошо, и оба имеют ширину 50%, их родителя (кроме как ввод немного шире, если вы знаете решение для этого, я также ценю помощь). < /p>
, как я уже не хочу, чтобы оба имели ту же ширину, поэтому я пробовал ее с первым кодом, но первый ребенок (вход) не изменяется. Странно то, что кнопка работает просто отлично, и если я дам ему значение, подобное следующему: ширина: 75%; 

она работает. Такое ощущение, что я вообще не могу его изменить. Если я дам ввод еще один тег и попытаюсь использовать этот тег с .tag для &: первого ребенка, все еще нет изменений.>

Подробнее здесь: https://stackoverflow.com/questions/755 ... and-height