CODEWITHSUNDEEP
htmlcsscss-positionabsolute
user14236061
user14236061

Reputation: 1

Overflow-x: auto and position: absolute

Element with position: absolute goes down

first screenshot instead of to be like this: second screenshot

You can edit the below code on codepen.

.container {
  margin: auto;
  width: 700px;
  height: 300px;
  background: lightblue;
  overflow-x: auto;
  position: relative;
}

.child {
  width: 50px;
  height: 300px;
  position: absolute;
  top: 100%;
  background: red;
}
<div class="container">
  <div class="child"></div>
</div>

Upvotes: 0

Views: 753

Answers (2)

Johannes
Johannes

Reputation: 67778

The overflow-x: auto setting on the parent expands its height when an absolutely positioned child element is added that overflows the parent. Erase it to get a result like in your second image.

.container {
  margin: auto;
  width: 700px;
  height: 300px;
  background: lightblue;
  position: relative;
}

.child {
  width: 50px;
  height: 300px;
  position: absolute;
  top: 100%;
  background: red;
}
<div class="container">
  <div class="child"></div>
</div>

Upvotes: 1

Yevhenii Shlapak
Yevhenii Shlapak

Reputation: 786

Try this:

.child {
  width: 50px;
  height: 300px;
  position: absolute;
  bottom: 0;
  background: red;
}

I think this is what you need

Upvotes: 0

Related Questions