Why does inline-block in css generate weird spacing issues?

Question

I want to understand why the div wasn't able to wrap around the inline-block elements (buttons in this case).

html

<div class="flex">
  <div class="first">First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First Firsta</div>
  <div class="wrap">
    <button>Hello</button>
    <button>Hey</button>
  </div>
</div>

css

.flex {
  display: flex;
}
.first {
  margin-right: auto;
}
.wrap {
  background: #833;
}

EDIT: you need to max size the browser portion to see the red spacing on the right.

Inline-block treats an element similarly like text. If there are spaces in your element(even if that is a new line) it will be treated like space. — Kushtrim, Oct 31 '18 at 20:30

Rick Pfahl · Answer 1 · 2018-10-31T20:41:59.583

0

The browser is left to make that determination for flexbox elements.

Try changing the width of the window and see how it changes.

This post might help you. How to set a fixed width column with CSS flexbox

edited Oct 31 '18 at 20:41

answered Oct 31 '18 at 20:35

Rick Pfahl

41
4

shouldn't flex box just resize and squeeze the empty space out of the red container as well? – user2167582 Nov 01 '18 at 04:09
Well, it's also trying to fill the width of the browser window. You just need to give it the necessary information. In this case, if you say `flex-basis:0px;` it will start out rendering zero width and expand to accommodate the content. – Rick Pfahl Nov 02 '18 at 16:00

score 0 · Answer 2 · answered Nov 01 '18 at 04:34

add <br> between button or set display:block to button

.flex {
  display: flex;
}

.first {
  margin-right: auto;
}

.wrap {
  background: #833;
}

.wrap button {
  display: block;
}

<div class="flex">
  <div class="first">First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First First Firsta</div>
  <div class="wrap">
    <button>Hello</button>
    <button>Hey</button>
  </div>
</div>

Why does inline-block in css generate weird spacing issues?

2 Answers2