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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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