Установка элемента в свой контейнер в CSS ⇐ CSS

[Anonymous]

Я пытаюсь настроить контейнер, в котором есть еще один элемент внутри. Структура примерно так: < /p>

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

div#container
div#content
div.line-numbers
text-area
< /code>
Контейнер (div#container

) будет фиксированной высотой, в то время как содержание (

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

div#content

) может быть более высоким или короче.
Я хотел бы, чтобы содержание вертикально прокручивалось в контейнере, когда оно выше, и заполнить пространство, когда оно меньше. Несколько я не хотел бы признать.

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

div#container {
font-size: 1.25em;
height: 8em;
border: thin solid red;
div#content {
display: flex;
flex-direction: row;
overflow: scroll;
height: 100%;
& > :is(div.line-numbers, textarea) {
border: thick solid pink;
height: 100%;
font-family: monospace;
font-size: 1em;
line-height: 1em;
padding: 0.5em;
}
& > div.line-numbers {
white-space: pre;
border: thin solid green;
}
& > textarea {
background-color: lightyellow;
resize: none;
overflow: hidden;
}
}
}< /code>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16


One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Thirteen
Fourteen
Fifteen
Sixteen

То, что я в конечном итоге, является внутренним div , переполненным его границей, и Textarea придерживается его размера. То есть нет JavaScript или какой -либо другой технологии программирования? Я уже разработал JavaScript, чтобы сгенерировать номера строк и обернуть номера строк и исходную Textarea внутри нового Div. Это вопрос того, как сделать Div#Content элемент подгонка контейнера div# элемент: разверните, если он меньше, или прокрутите, если он больше.>

Подробнее здесь: https://stackoverflow.com/questions/796 ... ner-in-css