CODEWITHSUNDEEP
htmlcss
smack-a-bro
smack-a-bro

Reputation: 741

Make absolute positioned div fit content width and overflow parent with horizontal scroll

I have a bootstrap modal with product info. On that modal is a an additional images section that needs to be horizontal scroll-able. I have gotten it to work but I have to sent a fixed width. Is there anyway I can make this absolute div fit the content width without dropping images to a new line?

<div class="additional-images-container">
  <div>
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
  </div>
</div>

.additional-images-container {
    height: 120px;
    overflow-x: scroll;
    position: relative;
}

.additional-images-container div {
    position: absolute;
    width: 200%;
}

Again, what I need is the child div to auto size its width and overflow the parent with a horizontal scroll bar(when needed). I cannot used jQuery to do this btw.

Upvotes: 0

Views: 1943

Answers (3)

Tibix
Tibix

Reputation: 390

The problem here is that you can not use position: absolute; and white-space: nowrap;

The Issue can be solved by adding another wrapper inbetween (.additional-wrapper). This wrapper will have the property white-space: nowrap;

Also notice that i made a class for your images.

.additional-images-container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
}

.additional-wrapper {
  white-space: nowrap;
}

.images {
  height: 100px;
  width: 100px;
}
<div class="additional-images-container">
  <div class="additional-wrapper">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
  </div>
</div>

Upvotes: 0

Shiv Kumar Baghel
Shiv Kumar Baghel

Reputation: 2480

use white-space: nowrap; in parent div. and display: inline-block; child div for images.

.additional-images-container {
    height: 120px;
    overflow-x: scroll;
    position: relative;    
    white-space: nowrap;
}


.additional-images-container div {
    display: inline-block;
}
<div class="additional-images-container">
  <div>
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
  </div>
</div>

Upvotes: 0

smack-a-bro
smack-a-bro

Reputation: 741

Literally figured it out right after posting this question and spending hours lol.

Just removed the width: 200%; and replaced with min-width: max-content;

Upvotes: 4

Related Questions