Input not displayed inside parent

April 16, 2024

Take the snippet below:

* {
  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%;
}

<div id="content">
  <div id="rightPane">Right pane</div>
  <div id="leftPane">
    Left pane
    <input type="range" orient="vertical" />
  </div>
</div>

Output (Chrome):

As you can see, the input is not inside its parent. I have no idea why. This behaves identically in Chrome, Firefox, Konqueror, so it must be the "correct" behavior, however counter-intuitive is may be.

Can someone explain to me why the input, which is position : absolute; right : 0px; laid out at 0px to the right of its grandparent and not of its parent like it always is? How should I write my code so that it’s 0px from the right of its parent?

My real layout is substantially more complex than this, with leftPane containing canvases with webGL inside which forces me to compute the pixel size in JavaScript and set it dynamically if I want pixel-perfect rendering, but this toy example behaves the same as my actual layout.

>Solution :

Just add position: relative; to the id #leftPane, because you have used position: absolute;, so you need to specify a relative positioning context for it, which is achieved by setting the parent element’s position property to relative.

* {
  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%;
  position: relative;
}

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

<div id="content">
  <div id="rightPane">Right pane</div>
  <div id="leftPane">
    Left pane
    <input type="range" orient="vertical" />
  </div>
</div>