Balancing column width in flexbox and grid

Question

I've got two columns in a parent container of 600px width. The children’s character length dictates the column width (weighted split). However, as both columns become increasingly similar in their width, a balanced (50/50 split) layout should be preferred, illustrated below.

Is it possible to achieve this kind of layout in flexbox or grid, without javascript? I imagine determining string length and switching css properties according to a threshold would be an option that I don't want to go down.

My intention isn't to create a single type of split but rather to make the layout respect both splits conditionally.

.container {
  outline: 1px solid red;
  width: 100%;
  height: 60px;
  display: flex;
}

.child {
  padding: 0.5px;
  outline: 1px solid black;
  display: grid;
  place-content: center;
}

.grow {
  flex-grow: 1; /* flexible split */
}

.balanced {
  width: 100%; /*  50-50 split */
}

<div class="container">
  <div class="child grow">
    asdasdasdasd
  </div>
  <div class="child grow">
    asdaassdasdasdsdasdasd
  </div>
</div>
<div class="container">
  <div class="child balanced">
    asdasdasdasd
  </div>
  <div class="child balanced">
    asdaassdasdasdsdasdasd
  </div>
</div>

Paulie_D · Answer 1 · 2021-11-26T10:42:49.073

0

Just add a maximum width?

.container {
  outline: 1px solid red;
  width: 100%;
  height: 60px;
  display: flex;
}

.child {
  padding: 0.5px;
  outline: 1px solid black;
  display: grid;
  place-content: center;
}

.grow {
  flex-grow: 1;
  max-width:50%;
}

.balanced {
  width: 100%;
  /*  50-50 split */
}

<div class="container">
  <div class="child grow">
    asdasdasdasd
  </div>
  <div class="child grow">
    asdaassdasdasdsdasdasd
  </div>
</div>
<div class="container">
  <div class="child balanced">
    asdasdasdasd
  </div>
  <div class="child balanced">
    asdaassdasdasdsdasdasd
  </div>
</div>

edited Nov 26 '21 at 10:42

answered Nov 25 '21 at 17:03

Paulie_D

107,962
13
142
161

This only creates a 50/50 split and does not respect both scenarios. – msalla Nov 26 '21 at 09:50
Your question was unclear as to what is required. – Paulie_D Nov 26 '21 at 10:39

score 0 · Answer 2 · answered Nov 26 '21 at 12:50

Isn't flex-grow alone solving directly your problem?

See the snippet:

.container {
  outline: 1px solid red;
  width: 100%;
  height: 60px;
  display: flex;
}

.child {
  padding: 0.5px;
  outline: 1px solid black;
  display: grid;
    flex-grow: 1; /* flexible split */

  place-content: center;
}

<div class="container">
  <div class="child">
    asdasd
  </div>
  <div class="child">
    asdaassdasdasdsdasdasd
  </div>
</div>
<div class="container">
  <div class="child">
    asdasdasdasd
  </div>
  <div class="child">
    asdaassdasdasdsdasdasd
  </div>
</div>
<div class="container">
  <div class="child">
    asdaassdasdasdsdasdasd
  </div>
  <div class="child">
    asdaassdasdasdsdasdasd
  </div>
</div>

score 0 · Accepted Answer · answered Nov 26 '21 at 13:55

In the meantime I found the answer.

Setting flex-basis enforces a 50/50 split when column width is similar. The unequal split is respected by setting flex-grow and flex-shrink.

.parent {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 50%;
  padding-right: 1em;
  padding-left: 1em;
}

Balancing column width in flexbox and grid

3 Answers3