3

I have a parent container that contain some inline child elements and the parent container has dynamic width. It looks great till all child elements are in one line but when you shrink the browser window and a child element go to the next line then it leave extra space on right side in parent container. As you can see the extra space between child and container's border in below image.

enter image description here

.container {
  display: inline-block;
  border: 5px solid #000;
  padding: 10px;
}

.child {
  display: inline-block;
  background-color: #F00;
  width: 100px;
  height: 100px;
  margin: 5px;
}
<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

I wanna know two things:

1: Why don't the parent container's width shrink after an inline child element go to the next line?

2: Is there any workaround to remove that extra space with CSS?

Please note that I used the display: inline-block; for .child tags just to demonstrate that but I can also use any css property like flex or float to achieve that.

Anonymous
  • 10,002
  • 3
  • 23
  • 39
  • Remaining space is not enough for the element to fit.. – Rayon Jan 11 '16 at 19:46
  • Not same, but similar to [this](http://stackoverflow.com/questions/33192745/center-align-container-and-left-align-child-elements) and [this](http://stackoverflow.com/questions/19527104/left-aligned-last-row-in-centered-grid-of-elements), short answer is using @media. – Stickers Jan 11 '16 at 19:46
  • what about a flexbox? – Daniel A. White Jan 11 '16 at 19:47
  • I just want my container width equal to my child divs width even after a child go to next line. I can use flexbox solution or any workaround to achieve it. – Anonymous Jan 11 '16 at 19:49
  • @Pangloss I can't use `@media` queries coz there could be more or less child divs – Anonymous Jan 11 '16 at 19:53
  • OK, one more thing isn't very clear - so are you also open to flex or float solution? or you know it already. – Stickers Jan 11 '16 at 19:58
  • 1
    yeah sure and I've already tried flex and other solutions but they didn't work for me and I set the childs width 100px for demo but some child elements contain images and other stuff too so it's not possible to give them percentage width. – Anonymous Jan 11 '16 at 20:02
  • You can do something like this with Flexbox https://jsfiddle.net/stqcckys/2/ – Nenad Vracar Jan 11 '16 at 20:04
  • 1
    @NenadVracar The width of child elements aren't same and some can have fixed width too also I'm not looking for a solution to keep all child divs in one line. – Anonymous Jan 11 '16 at 20:12
  • 1
    In CSS, when a child item wraps, the parent container *does not* recalculate its width to shrink-wrap the fewer columns. See my answer here for more details and a possible workaround (using pure CSS and `inline-block`). http://stackoverflow.com/a/32811002/3597276 – Michael Benjamin Jan 11 '16 at 20:39
  • 1
    There is no simple solution to this...it's the way line boxes work...it's a common request. – Paulie_D Jan 11 '16 at 20:39
  • Adding to my comment above, the gap on the right represents the space that was occupied by the item before it wrapped. The container doesn't care; it stays on its original course regardless. – Michael Benjamin Jan 11 '16 at 20:44
  • @Michael_B Thanks your comment is really helpful to understand that but like I said in above comment I can't media queries. – Anonymous Jan 11 '16 at 20:49
  • In CSS, the only solutions to this problem that I have experience with are: (1) knowing the fixed-width of the container, and the fixed-size of the items, or (2) using media queries. There may be other methods, but I don't think they'll be simpler. However, this should be a pretty easy fix with JS. – Michael Benjamin Jan 11 '16 at 21:06

1 Answers1

-1

You can use flexbox instead. Change the display of the parent container to display: flex and a fiddle.

After reading the post again, I'm not sure if you especially want to use display: inline-block. Sorry bout that!

Amber
  • 465
  • 1
  • 5
  • 13