Flexbox design: I want all sides of the text bubble to touch

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>

Currently my boxes only touch horizontally, but I would also like them to touch vertically. I tried searching for information on this, but when I did find something that worked, it gave them more height than they needed.

Answer 1

p The tag has a margin attribute by default. Set margin: 0 to fix 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;
}

  

    
Lorem, ipsum.
    
lorem
    
adsadad
    
sss
    
asdasda asdasda
    
asss
    
sss
    
asdas asd
    
adadaddd
    
adadasd
    
addd
    
adadd
    
ss
  

Edit 2

you can:

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

To parent fm-bubbles. This will make the child maintain the height of its content and eliminate vertical space between children.

.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;
}

  

    
Lorem, ipsum.
    
lorem
    
adsadad
    
sss
    
asdasda asdasda
    
asss
    
sss
    
asdas asd
    
adadaddd
    
adadasd
    
addd
    
adadd
    
ss