make div width match content

Question

I am designing a horizontal image viewer where images are viewed in a horizontal line with the following html:

<div style="margin-top: 10%;width: 95%;margin: 0 auto">
  <div style="width: 1950px" id="innerScroll">
       <span style="display: inline-block;">
          <a href="...">
                <img src="..."  />
          </a>
        </span>
    <span style="display: inline-block;">
          <a href="...">
                <img src="..."  />
          </a>
        </span>
    <span style="display: inline-block;">
          <a href="...">
                <img src="..."  />
          </a>
        </span>
    ...
    ...
</div>

and later I am going to make the inner div scroll using jQuery.

The problem is the width of the inner div, the content may be displayed differently on different screens so on some screens the total width of the content exceeds the width of the div and goes down to a second line, so event setting it as a fixed number of pixels did not work.

How can I set the width of the div so that it automatically expand to fit the content?

rmolinamir · Accepted Answer · 2018-10-14 18:57:31Z

Try adding:

#innerScroll{
  overflow-x: scroll 
}

On the inner div with 1950px of width and see if it works. That may cause the whole page to scroll with it though, I can't test it since I don't have a full example of your CSS.

Here's an example of viewport-percentage lengths:

#innerScroll{
  overflow-x: scroll 
  width: 95vw; 
}

A width of 95vw will make the div's width be equal to 95% of the screen's viewport width.

You can also use the width's fit-content property, but it is not supported by Microsoft Edge. More info here.

#innerScroll{
  overflow-x: scroll 
  width: fit-content; 
}

Alright, I tried something a bit different but I removed the inline styling from your original post, but tried to keep it as similar as possible. I added white-space: nowrap; to the CSS in order to avoid line breaks, and set the width to 100% so that it'll equal 100% of it's parent's width.

#innerScroll {
  overflow-x: scroll;
  width: 100%;
  white-space: nowrap;
}

#wrapper {
  margin-top: 10%;
  width: 95%;
  margin: 0 auto;
}

<div id="wrapper">
  <div id="innerScroll">
       <span style="display: inline-block;">
          <a href="#">
                <img src="https://lh6.googleusercontent.com/proxy/NI1Fg3Rn_msYkSv0qXSZzNbwWqz9yNt_yB-0DlRgoJ_8P09ZCSwQiHDd5qCb-UpnHatmzFBbwMT-OB03IdunDsTeb-XxgMNS5zX6a_P3sxf8Us4WK7vYiWGCrKR8un_jOuxA39iulUXRW3zk65LO13HEkejs1HV5OWS3zIcRNvtRwy_crL8MUCS9nMqQIRgyjLMUSU8=w5000-h5000"  />
          </a>
        </span>
    <span style="display: inline-block;">
          <a href="#">
                <img src="https://lh6.googleusercontent.com/proxy/NI1Fg3Rn_msYkSv0qXSZzNbwWqz9yNt_yB-0DlRgoJ_8P09ZCSwQiHDd5qCb-UpnHatmzFBbwMT-OB03IdunDsTeb-XxgMNS5zX6a_P3sxf8Us4WK7vYiWGCrKR8un_jOuxA39iulUXRW3zk65LO13HEkejs1HV5OWS3zIcRNvtRwy_crL8MUCS9nMqQIRgyjLMUSU8=w5000-h5000"  />
          </a>
        </span>
    <span style="display: inline-block;">
          <a href="#">
                <img src="https://lh6.googleusercontent.com/proxy/NI1Fg3Rn_msYkSv0qXSZzNbwWqz9yNt_yB-0DlRgoJ_8P09ZCSwQiHDd5qCb-UpnHatmzFBbwMT-OB03IdunDsTeb-XxgMNS5zX6a_P3sxf8Us4WK7vYiWGCrKR8un_jOuxA39iulUXRW3zk65LO13HEkejs1HV5OWS3zIcRNvtRwy_crL8MUCS9nMqQIRgyjLMUSU8=w5000-h5000"  />
          </a>
        </span>
</div>
<div>
  Hello world!
</div>

https://jsfiddle.net/y43zraos/

My question is: how to find a way not to specify the width for the inner div, so it automatically fits the content
Oh okay, sorry I misunderstood. If you want the width of the div to be proportional to the width of the screen you can use viewport-percentage lengths, I edited my answer to show this.
Just tried something a bit different, check it out and let me know if it works! You can also keep the image aspect ratios when screen is resized but that requires a bit more of CSS.
Ok, the white space part did help avoiding wrapping, but for some reason i do not know the content of the inner div is clipped because its width is 100% and it did not expand, thank you anyway I am going to investigate it
I find it out, I am using some JavaScript code that changes the overflow of the div to hidden, so your answer is correct, thank you

Collectives™ on Stack Overflow

make div width match content

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related