Set Div Width To Img Content

Question

I know this has been asked quite often, but no solution seems to apply to my situation. I imagine it's something simple that I'm not seeing. Hopefully someone can point me in the right direction.

The Problem

I have a vertical stack of icons that remain to the left of the page as one scrolls down. Everything appears to work, except that the containing divs won't shrink to their content, which prevents users from interacting with part of the interface:

Notice that the Div expands well beyond the image it contains. This interferes with selecting the radio buttons. Here's the markup:

 .navStack { display: table; position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin-left: -5%; } .navStack div { width: auto; } .navIcons { transition: all 0.3s ease; width: auto; max-Width: 10%; max-Height: 10%; margin: 4px 0; -webkit-filter: brightness(100%); filter: brightness(100%); cursor: pointer; display: inline-block; } .navIcons:hover { transform: scale(1.5); -webkit-filter: brightness(70%); filter: brightness(70%); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } 

 <div class='navStack'> <div> <img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" /> </div> <div> <img class='navIcons' title='Example' src="https://i.stack.imgur.com/fadxm.png" alt="" /> </div> </div> 

Things I've tried

• Display: inline-block / Display: table are the most common solutions. Placing them on 'navStack' does nothing. Placing inline-block on 'navStack div' gets me this:

• Display: inline - on 'navStack' there's no response; on 'navStack div' this:

• Placing a width doesn't do anything.

• Inline-Flex on 'navStack div' gets the same as the above; on 'navStack' in gets me this:

• width: min-content - whether it's 'navStack' or 'navStack div', the images completely disappear when applying this.

• Per one comment, I've played with max-width/height in'navIcons' and added it to 'navStack div' to look like this:

 .navStack div { max-height: 10%; max-width: 10%; border: 1px solid; } .navIcons { transition: all 0.3s ease; width: auto; max-width: 100%; max-height: unset; /* max-Width: 10%; max-Height: 10%; */ margin: 4px 0; -webkit-filter: brightness(100%); filter: brightness(100%); cursor: pointer; display: inline-block; } 

 <div class='navStack'> <div> <img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" /> </div> <div> <img class='navIcons' title='Example' src="https://i.stack.imgur.com/fadxm.png" alt="" /> </div> </div> 

Here's the result:

Progress

There has been progress thanks to the kind help of people below. With the latest CSS (last CSS above), the 'navStack div' elements are not extending anymore, however, the 'navStack' is:

Answer 1

The solution to this was to apply sizing to both the parent div, its children, and the images.

Specifically, I've applied to 'navStack' a 'max-Width: 10%' , to 'navStack div' a max-height: 40%; and max-width: 40%; max-height: 40%; and max-width: 40%; , and to 'navIcons' width: auto; max-width: 100%; max-height: unset; width: auto; max-width: 100%; max-height: unset;

The final markup looks like this:

 .navStack { position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin-left: -5%; max-width: 10%; } .navStack div { max-height: 40%; max-width: 40%; } .navIcons { transition: all 0.3s ease; width: auto; max-width: 100%; max-height: unset; margin: 4px 0; -webkit-filter: brightness(100%); filter: brightness(100%); cursor: pointer; display: inline-block; } 

 <div class='navStack'> <div> <img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" /> </div> <div> <img class='navIcons' title='Example' src="https://i.stack.imgur.com/fadxm.png" alt="" /> </div> </div> 

Answer 2

I see you've already answered your own question, but I will throw mine in nonetheless. I believe you are seeing things more complicated than they need to be.

By simply specifying the max-width on your navstack, the rest of the elements should follow when you set them to a width of 100%, giving the following markup :

.navStack {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  max-width: 10%;
}

.navStack div {
  width: 100%;
}

.navIcons {
  transition: all 0.3s ease;
  width: 100%;
  margin: 4px 0;
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
  cursor: pointer;
  display: inline-block;
}

Answer 3

Use This Code:

<style>
    .navStack {
        display: table;
        position: fixed;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        margin-left: 0;
    }

    .navStack div {
        width: 40px;
    }

    .navIcons {
        transition: all 0.3s ease;
        width:100%;
        margin: 4px 0;
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
        cursor: pointer;
        display: inline-block;
    }

        .navIcons:hover {
            transform: scale(1.5);
            -webkit-filter: brightness(70%);
            filter: brightness(70%);
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            -ms-transition: all 1s ease;
            transition: all 1s ease;
        }
</style>

HTMl:

<div class='navStack'>
    <div>
                    <img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" />
                </div>
     <div>
                   <img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" />
                </div>
</div>

Answer 4

When sizing your image a percentage of the parent div, the div stays the same size. So if you need to shrink the size of image, change your code as follow:

.navStack {
    max-width: 10%;
}

.navIcons {
    width: 100%;
    /* max-width: 10%; */
    /* max-height: 10%; */
}

The reset of your code stays the same.