How to make text in Flexbox, not defining width of flexbox? - html

Question

I have this issue: I have flexbox with 3 photos in the center of the screen.
under these photos, I have some text like mobile number etc.
When I add this text into this boxes, this text is defining the width of my box, and it's moving boxes and they are not in the center anymore.
Final result should be: The box width should be the same but text should break and be centered.
Here you can see size of one box
Here you can see size od the other box
Snippet:
.ikony {
padding-top: 60px;
display: inline-flex;
justify-content: center;
width: 100%;
font-weight: 600;
font-size: 16px;
color: #020E46;
text-align: center;
font-family: Open Sans,Arial,sans-serif;}
.column {
padding: 90px 70px 0px 70px;}
<div class="ikony">
<div class="column prvy">
<img src="img/mobil-icon.png" alt="iconka-mobil" width="100px" height="100px">
<div class="txtpod">
<p>[phone]</p>
</div>
</div>
<div class="column">
<img src="img/pin-icon.png" alt="ikona pinu" width="100px" height="100px">
<div class="txtpod">
<p>address 273/14, Svit</p>
</div>
</div>
<div class="column">
<img src="img/email.png" alt="ikona pinu" width="100px" height="100px">
<div class="txtpod">
<p>myemail#gmail.com</p>
</div>
</div>
</div>
Thanks for any advice

Answer 1

Add flex-grow: 0 and width: 33% to the flex items (.column) to prevent them to get wider.
However, if you have something like an email address in one of the containers that forces it to be wider than 33% because it contains no spaces and therefore can't break into several lines (like in your snippet example), you should use a small font that lets it fit into the 33% width.