css Question posted in
Some basic documentation can be found here.

Css – Inline-flex not working when flex wrap is causing wrapping

In my snippet below you can see that I have two inline elements: first a descriptive label, and then an inline-flex container.

What I wish is for my layout to look like it does in my picture:

enter image description here

However, as you can see in my snippet, as soon as the flex items start wrapping, they cause the flex box to somehow become a block element instead which is very confusing to me. I made the container in my snippet resizeable so you switch between the flex box wrapping and not wrapping and you can see how the flex box remains an inline element as long as it is not wrapping, but becomes a block element as soon as it wraps.

Before Answering: The simple solution here is to make the label part of the flex box, however, for this particular project I cannot/do not wish to do that for reasons.

I would understand if there is no solution to my problem and this is just yet another limitation of CSS! I in that case I`ll accept an answer that explains why this is happening because it is very confusing to me.

.container {
  resize: both;
  border: 1px solid black;
  overflow: auto;
}
.flex {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: 0.5rem;
}
.flex-item {
  padding: 0.5rem;
  background: #ccc;
}
.text {
  display: inline;
  background: #ccc;
}
<div class="container">
  <span>Some inline text:</span>
  <span class="flex">
    <span class="flex-item">Item 1</span>
    <span class="flex-item">Item 2</span>
    <span class="flex-item">Item 3</span>
    <span class="flex-item">Item 4</span>
  </span>
</div>

<br>

<div class="container">
  <span>Some inline text:</span>
  <span class="text">Some inline text behaving like a propper inline element should behave</span>
</div>
Tags:

2

Answers


  1. 0

    Flexbox is not a magic tool for all the situations. You don’t need it here.

    .container {
  resize: both;
  border: 1px solid black;
  overflow: auto;
}
.flex {
  margin-left: 0.5rem;
}
.flex-item {
  display: inline-block;
  padding: .5rem;
  margin: 0 .25rem .5rem;
  background: #ccc;
}
    <div class="container">
  <span>Some inline text:</span>
  <span class="flex">
    <span class="flex-item">Item 1</span>
    <span class="flex-item">Item 2</span>
    <span class="flex-item">Item 3</span>
    <span class="flex-item">Item 4</span>
  </span>
</div>
    Login or Signup to reply.
  2. 0

    So, I played around with your code using Inspect element, and I think I’ve figured out why it’s not functioning properly (I’m fairly new to advanced CSS, so I may be completely wrong, but it made sense in my mind).

    Since the label element is not within the flexbox, the label and flexbox are counted as individual elements when it comes to wrapping. So, the inline flex items are wrapped below the label first, and then as the width of the container gets smaller, the flex items themselves start wrapping as they should.

    Unfortunately, I’m not sure how to fix the problem since you stated you can’t put the label inside the flexbox.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search