0

It's easier if you look. Resize the window's width:

.outer {
  background:red;
  display: inline-block;
}
.inner-1 {
  display:inline-block;
  height: 50px;
  width:250px;
  background:green;
  margin-right:50px;
}
.inner-2 {
  display:inline-block;
  height: 50px;
  width:250px;
  background:blue;
}
<div class="outer">
    <div class="inner-1"></div>
    <div class="inner-2"></div>
</div>

Basically, as soon as the blue box wraps the red box should shrink to fit. But the red box continues to behave as though the blue box is on the first line.

I can sort of get there with media queries but even that is a guessing game since I don't know why it's doing this in the first place.

user875234
  • 2,399
  • 7
  • 31
  • 49
  • Related: [Why do floats keep a “phantom” space when they escape to the next line?](https://stackoverflow.com/questions/27632910/why-do-floats-keep-a-phantom-space-when-they-escape-to-the-next-line) (the behavior is the same regardless of whether the items are floats or inlines - there is some commentary beneath that question alluding to a possible explanation but no clear answer) – BoltClock Jan 07 '18 at 06:10
  • Related (if not dupe): [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) – Paulie_D Jan 07 '18 at 12:31
  • ..and https://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as-they-wrap?noredirect=1&lq=1 – Paulie_D Jan 07 '18 at 12:33

1 Answers1

0

Please provide the image which shows what's your goal.

But if you want to make blue box to be full width on small screen, on media query you should add this code:

.inner-2 {
  width: 100%;
  display: block;  /*Optional*/
}
Sanau
  • 7
  • 2