flexbox with dynamic content should stay at initial size

Question

I have the following flex layout with several boxes including a short label and a long value. These values change dynamically but they consume more or less a similar amount of width in each state.

When the content change the boxes change their width a tiny bit which causes an ugly jumping of the boxes. I want the boxes to stay at their initial width without giving a fixed width unless the value becomes so large that it dont fit in the box anymore (but that's a special case that rarely happens).

.outer
{
    flex-grow: 1;
    border: 1px solid red;
    padding: 10px;
    margin: 10px;
            
}
    
.inner
{
    border: 1px solid green;
}

<div style="display: flex; flex-wrap: wrap; border: 1px solid black;">
        <div class="outer">
            <div class="inner">
                <p>label 1</p>
                <label>7684433487</label>
            </div>
        </div>
        <div class="outer">
            <div class="inner">
                <p>label 2</p>
                <label>7632423887</label>
            </div>
        </div>
        <div class="outer">
            <div class="inner">
                <p>label 3</p>
                <label id="x">7682342487</label>
            </div>
        </div>
        <div class="outer">
            <div class="inner">
                <p>label 4</p>
                <label>76882353257</label>
            </div>
        </div>
    </div>
  <button onclick="document.getElementById ('x').innerHTML = '442424244';">change content</button>

score 1 · Accepted Answer · answered Dec 13 '22 at 13:55

The standard way to do this is to use flex: 1 which sneakily sets flex-basis to 0;

.outer {
    flex: 1;  
    border: 1px solid red;
    padding: 10px;
    margin: 10px;          
}
    
.inner {
    border: 1px solid green;
}

<div style="display: flex; flex-wrap: wrap; border: 1px solid black;">
        <div class="outer">
            <div class="inner">
                <p>label 1</p>
                <label>7684433487</label>
            </div>
        </div>
        <div class="outer">
            <div class="inner">
                <p>label 2</p>
                <label>7632423887</label>
            </div>
        </div>
        <div class="outer">
            <div class="inner">
                <p>label 3</p>
                <label id="x">7682342487</label>
            </div>
        </div>
        <div class="outer">
            <div class="inner">
                <p>label 4</p>
                <label>76882353257</label>
            </div>
        </div>
    </div>
  <button onclick="document.getElementById ('x').innerHTML = '442424244';">change content</button>

flexbox with dynamic content should stay at initial size

1 Answers1