2

How can I make a container element use only the "required" space to wrap inline-block children? See this image below...

enter image description here

You can see how the arrows stretch through the unwanted space. I've spent a few hours already trying to make it work. I even tried a couple nice SO answers such as this one...

Fit div width to inline-block children

but it didn't seem to suit my case scenario because it assumes a fixed number of children per row.

The fiddler below illustrates the problem I'm facing. However, there's one thing to notice, the max-width of the .box is supposed to be set in % rather than px

html,
body {
    background-color: #eee;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.container {
    display: block;
    width: 100%;
}

.box {
    display: inline-block;
    /*
    In the production "max-width" will be set to a percentage value rather than px units
    Using pixels here just for illustration purposes
    */
    max-width: 380px;
    padding: 20px;
    margin: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
}

.img-wrapper {
}

.img-wrapper span {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 128px;
    height: 128px;
    border-radius: 10px;
}

.img-wrapper img {
    max-width: 196px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
<div class="container">
    <div class="box">
        <p>
            Lorem ipsum dolor sit amet
        </p>
        <div class="img-wrapper">
            <span>
            <img src="https://i.imgur.com/yvMCRsv.jpg" />
            </span>
            <span>
            <img src="https://i.imgur.com/efFdd14.jpg" />
            </span>
            <span>
            <img src="https://i.imgur.com/7Yv987J.jpg" />
            </span>
        </div>
    </div>
</div>

Question

Basically, all I want to achieve is having the parent/container element use only the necessary space when the children are inline-block (floats are welcomed)

Community
  • 1
  • 1
Leo
  • 14,625
  • 2
  • 37
  • 55
  • 1
    The general consensus is that it can't be done using CSS alone. Other such questions are [Inline-block: word was wrapped but extra space in the right side left](https://stackoverflow.com/q/48041162/1016716), [CSS when inline-block elements line-break, parent wrapper does not fit new width](https://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width), [Inline-block line-wrap extra space](https://stackoverflow.com/questions/26459929/inline-block-line-wrap-extra-space) etc. – Mr Lister Jan 20 '18 at 06:57

1 Answers1

2

Here's a Fiddle, with working solution

What I basically did there was that,

  • Added float: left; and margin: 0px 5px 5px 0px; in .img-wrapper span{}
  • Added :nth-of-type() selector for .img-wrapper span{}

code:

.img-wrapper span {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 128px;
    height: 128px;
    border-radius: 10px;
    float: left;
    margin: 0px 5px 5px 0px;
}

.img-wrapper span:nth-of-type(2n + 1){
  clear: left;
}
akshif
  • 191
  • 1
  • 1
  • 10
  • That's exactly the same solution I made reference to in the question (https://stackoverflow.com/questions/31104214/fit-div-width-to-inline-block-children) the problem I had with this solution is that it assumes a fixed number of children per row. I'll upvote it because it can help others but unfortunately I can't accept it. Thanks for the help anyway – Leo Jan 20 '18 at 08:11