Pourquoi faire de pourcentage de la largeur de la taille d'flex éléments de la zone n'est pas correctement augmentation de la largeur de la table d'enrubannage qui a un quelconque (c'est à dire auto) largeur?

Ceci est expliqué dans 9.2. Détermination De La Longueur De La Ligne.

• Tout d'abord, le flex taille de base est déterminé pour chaque élément. Ce cas, c'est compliqué, parce que width: 50% dépend de la taille disponible. La spécification dit

  Si la flex base est content ou dépend de la disponibilité de ses
  la taille et le flex conteneur est de taille moyenne sous un min-contenu ou
  max-le contenu de la contrainte (par exemple, lors de l'exécution de tableau automatique
  mise en page [CSS21]), la taille de l'élément sous cette contrainte. L'
  flex taille de base est l'élément résultant taille principale.

  Je ne suis pas sûr si cela signifie que le flex taille de base sera le min-contenu ou max-content, parce que CSS utilisation de tables à la fois. Mais depuis il n'y a pas envelopper les opportunités, à la fois devrait être la même.

  De sorte que le flex de la base de la taille de la largeur du texte.

• Puis,

  Déterminer la taille principale du conteneur flex en utilisant les règles de
  le formatage du contexte dans lequel il participe.

  Ensuite, le tableau et le conteneur flex sera aussi large que la somme des textes.

Une fois la largeur du conteneur flex a été établi, le pourcentage de la flex éléments peuvent être résolus. Mais ils n'affecte pas la largeur du conteneur flex (ni la table).

Vous pouvez le voir mieux dans cet extrait de code:

CSS:

.flex {
  display: flex;
  background-color: lightblue;
  box-shadow: inset 0 0 1px black;
  flex-wrap: wrap;
}
.box {
  width: 50%;
  background-color: cyan;
  border-radius: 9px;
  box-shadow: inset 0 0 1px red;
}

HTML:

<table>
  <tr>
    <td>
      <div class="flex">
        <div class="">
          123456789ABCDEFGHIJKL
        </div>
        <div class="">
          meeedium
        </div>
        <div class="">
          short
        </div>
      </div>
    </td>
  </tr>
</table>
<table>
  <tr>
    <td>
      <div class="flex">
        <div class="box">
          123456789ABCDEFGHIJKL
        </div>
        <div class="box">
          meeedium
        </div>
        <div class="box">
          short
        </div>
      </div>
    </td>
  </tr>
</table>

Fondamentalement, ce que vous voulez, c'est de faire tous les flex éléments aussi large que la plus large une. Je ne pense pas qu'il existe un moyen de le faire en CSS, mais vous pouvez utiliser du JS.

Utilisation min-width sur la boîte. Qu'essayez-vous de faire exactement? pourquoi êtes-vous à l'aide de tableaux? vous pourriez utiliser des divs flottantes pour quelque chose comme ça et il l'habitude de faire face à beaucoup de problème.

CSS:

#container {
  
  width:50%;

  }

.box{
  max-width:49%;
  float:left;
  border:solid 3px #ccc;
 }


 .clearfix {
   clear:both;
   }

HTML:

<div id="container">
  <div class="box">
  28432412341341234
  </div>
    <div class="box">
  second boxxxxx
  </div>
    <div class="box">
  third boxxxxxxxxx
  </div>
  <div class="clearfix">
    </div>
  
  </div>