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:

Thanks for the comment. Didn't seem to work :/ . Will update the post. — user, Aug 27 '19 at 19:57
I made a mistake in the first comment, try this: `.navStack div{max-height: 10%; max-width:10%}` and `.navIcons {max-width: 100% max-height: unset}` — Calvin Nunes, Aug 27 '19 at 20:00
i made a little edit on your question to add a border letting us see the real div size, and it seems ok for me — Calvin Nunes, Aug 27 '19 at 20:08
Ok, I see what you did. Got me a step closer, however, navStack is now what I'm seeing extend too far. Following your logic, I tried navStack {max-width: 10%;} but that shrank everything, images included. — user, Aug 27 '19 at 20:13
anytime that you limit the parent size, the childs will be following the parent's max size (except in special cases), but if you limit `.navStack` size to 10%, you can then add 100% to its child, since it will not overflow the parent's 10% size. — Calvin Nunes, Aug 27 '19 at 20:16

score 1 · Accepted Answer · answered Aug 27 '19 at 20:24

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%;, and to 'navIcons' 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>

score 1 · Answer 2 · answered Aug 27 '19 at 20:38

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;
}

Yashar Azadvatan · Answer 3 · 2019-08-27T20:36:03.540

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>

Thanks Yashar. This almost worked, except it left the navStack on top of the content its meant not to block. See the submitted answer. — user, Aug 27 '19 at 20:26

score 0 · Answer 4 · answered Aug 27 '19 at 20:59

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.

Set Div Width To Img Content

4 Answers4