Ввод не отображается внутри родительского элемента [дубликат] ⇐ CSS

[Anonymous]

Воспользуйтесь фрагментом ниже:

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

* {
color: white;
padding: 0px;
margin: 0px;
box-sizing: border-box;
}

html {
background-color: black;
height: 100vh;
}

body {
height: 100%;
display: flex;
flex-direction: column;
}

#content {
display: flex;
flex-direction: row-reverse;
height: 100%;
}

#rightPane {
width: 30%;
height: 100%;
background-color: #303030;
}

#leftPane {
border: solid 1px red;
width: 70%;
height: 100%;
}

input {
writing-mode: vertical-lr;
direction: rtl;
position: absolute;
right: 0px;
height: 100%;
}

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

Right pane

Left pane

Вывод (Chrome):

Как видите, входные данные не внутри своего родителя. Понятия не имею почему. Это ведет себя одинаково в Chrome, Firefox, Konqueror, поэтому это должно быть «правильное» поведение, каким бы нелогичным оно ни было.
Может кто-нибудь объяснить мне, почему ввод, который позиция: абсолютная; right : 0px; расположен на расстоянии 0 пикселей справа от его родителя, а не от его родителя, как это всегда бывает? Как мне написать свой код так, чтобы он располагался на 0 пикселей справа от родительского элемента?
Мой реальный макет значительно сложнее, чем этот: leftPane содержит холсты с webGL внутри, что заставляет меня вычислять размер пикселя в JavaScript и устанавливаю его динамически, если я хочу отрисовку с точностью до пикселя, но этот игрушечный пример ведет себя так же, как мой реальный макет.

Подробнее здесь: https://stackoverflow.com/questions/783 ... ide-parent