Flexbox design: I want the text bubbles to be touching on all sides

Question

.fm-bubbles {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100px;
}
.fm-bubble {
  flex: 1 1 10%;
  height: max-content;
  border: 1px solid royalblue;
  border-radius: 5px;
}

        <div class="fm-content">
          <div class="fm-bubbles">
            <p class="fm-bubble">Lorem, ipsum.</p>
            <p class="fm-bubble">lorem</p>
            <p class="fm-bubble">adsadad</p>
            <p class="fm-bubble">sss</p>
            <p class="fm-bubble">asdasda asdasda</p>
            <p class="fm-bubble">asss</p>
            <p class="fm-bubble">sss</p>
            <p class="fm-bubble">asdas asd</p>
            <p class="fm-bubble">adadaddd</p>
            <p class="fm-bubble">adadasd</p>
            <p class="fm-bubble">addd</p>
            <p class="fm-bubble">adadd</p>
            <p class="fm-bubble">ss</p>
          </div>

At the moment my boxes are only touching each other horizontally, but i also want them to be touching vertically. I have tried to search for information about this, but when I do find something that works, it gives them more height than they need.

Touching on all sides? Are you thinking of [masonry layout](https://masonry.desandro.com/)? (Also, see Rachel Andrew's article about [CSS Masonry layout](https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/), in Smashing Magazine.) — David Thomas, Oct 28 '22 at 16:27
Ah...you you want the boxes to be only the height of the content and touch. My answer below removes the vertical spacing, but doesn't create a masonry layout (since flexbox does not do that). — disinfor, Oct 28 '22 at 16:31
Using the browser inspector on disinfor's answer and playing around with your styles — if I _remove_ the `height: 100px` on the rule for `.fm-bubbles` the vertical gap goes away. — Stephen P, Oct 28 '22 at 17:21

disinfor · Answer 1 · 2022-10-28T17:59:16.610

p tags have a margin property by default. Set the margin: 0 to fix the vertical spacing.

EDIT: This does not create a masonry layout, just removes the space between the boxes.

.fm-bubbles {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100px;
}

.fm-bubble {
  flex: 1 1 10%;
  border: 1px solid royalblue;
  border-radius: 5px;
  margin: 0;
}

<div class="fm-content">
  <div class="fm-bubbles">
    <p class="fm-bubble">Lorem, ipsum.</p>
    <p class="fm-bubble">lorem</p>
    <p class="fm-bubble">adsadad</p>
    <p class="fm-bubble">sss</p>
    <p class="fm-bubble">asdasda asdasda</p>
    <p class="fm-bubble">asss</p>
    <p class="fm-bubble">sss</p>
    <p class="fm-bubble">asdas asd</p>
    <p class="fm-bubble">adadaddd</p>
    <p class="fm-bubble">adadasd</p>
    <p class="fm-bubble">addd</p>
    <p class="fm-bubble">adadd</p>
    <p class="fm-bubble">ss</p>
  </div>
</div>

EDIT 2

You can:

   align-items: flex-start;
   align-content: flex-start;

to the parent fm-bubbles. This will keep the children the height of their content, and remove the space between the children vertically.

.fm-bubbles {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100px;
  align-items: flex-start;
  align-content: flex-start;
}

.fm-bubble {
  flex: 1 1 10%;
  border: 1px solid royalblue;
  border-radius: 5px;
  margin: 0;
}

<div class="fm-content">
  <div class="fm-bubbles">
    <p class="fm-bubble">Lorem, ipsum.</p>
    <p class="fm-bubble">lorem</p>
    <p class="fm-bubble">adsadad</p>
    <p class="fm-bubble">sss</p>
    <p class="fm-bubble">asdasda asdasda</p>
    <p class="fm-bubble">asss</p>
    <p class="fm-bubble">sss</p>
    <p class="fm-bubble">asdas asd</p>
    <p class="fm-bubble">adadaddd</p>
    <p class="fm-bubble">adadasd</p>
    <p class="fm-bubble">addd</p>
    <p class="fm-bubble">adadd</p>
    <p class="fm-bubble">ss</p>
  </div>
</div>

thank you! Is there a way to also make the child elements (fm-bubble) to only get the height they need? Ive tried "height: max-content" but that brings me the issue of getting whitespace vertically again... — christian_l30, Oct 28 '22 at 16:46
@christian_l30 maybe something like [this answer](https://stackoverflow.com/a/44523788/17300) would help. — Stephen P, Oct 28 '22 at 17:22
@christian_l30 I updated my answer. Doesn't do masonry, but removes the space, while making the height of individual `fm-bubble` elements the height of their content. You may consider also removing the `height: 100px` from the parent element (as Stephen P suggested in the comment on the question) — disinfor, Oct 28 '22 at 17:59
@disinfor Yess thank you! I'm going to look into masonry layouts! — christian_l30, Oct 29 '22 at 09:28

score 0 · Answer 2 · edited Oct 28 '22 at 16:59

I had prepared the code for your solution take it hope soo you will like it...

HTML

<body>
    <div class="container">
        <div class="fm-content-1">
            <p class="fm-bubble">Lorem, ipsum.</p>
            <p class="fm-bubble">lorem</p>
            <p class="fm-bubble">sss</p>
            <p class="fm-bubble">adsadad</p>
        </div>
        <div class="fm-content-2">
            <p class="fm-bubble bubble2">asdasda</p>
            <p class="fm-bubble bubble2">asss</p>
        </div>
        <div class="fm-content-3">
            <p class="fm-bubble">adadasd</p>
            <p class="fm-bubble">addd</p>
            <p class="fm-bubble">adadd</p>
            <p class="fm-bubble">ss</p>
        </div>
    </div>
</body>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {  width: 100%;
    height: 100px;
    background-color: lightblue;
    display: flex;
    flex-direction: column;
}

.fm-bubble {
    width: 100%;
    height: max-content;
    border: 1px solid royalblue;
    border-radius: 5px;
}

.fm-content-1 {
    width: 100%;
    display: flex;
    height: max-content;
    justify-content: space-between;
}

.fm-content-2 {
    width: 100%;
    display: flex;
    height: 60%;
    align-items: stretch;
    justify-content: space-between;
}

.bubble2 {
    height: 100%;
    width: fit-content;
}

.fm-content-3 {
    width: 100%;
    display: flex;
    height: max-content;
    justify-content: space-between;
}

Flexbox design: I want the text bubbles to be touching on all sides

2 Answers2