Why can't width flexible box items increase the width of a wrapping table that has an unspecified (i.e., automatic) width?

Question

Please take a look at this snippet:

table {
  background-color: yellow;
  box-shadow: inset 0 0 1px red;
  max-width: 100%;
  
  /* You would get similarly strange behavior with collapsing borders: */
  /* border-collapse: collapse; */
}

td {
  background-color: lightgreen;
  box-shadow: inset 0 0 1px blue;
  max-width: 100%;
}

.flex {
  max-width: 100%;
  display: flex;
  flex: 1;
  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;
}

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

Run codeHide result

(Here is the code if you want to play with it more easily: http://codepen.io/anon/pen/MKJmBM )

Please note that the text in the upper left boxdoes not fully fit into it. (At least in Chrome, this is not so.) I assumed that the packing table would try to “push” its width so that its contents fit completely into itself. So is this an implementation error? Or unspecified behavior? Or is my code just messed up?

Can someone explain this behavior and provide a solution to fix it?

(... , : CSS, "" , " , " ;)

---

: " " . , , , max-width: 50%; .box, , . : , ?

, " ": , , , .

Answer 1

9.2. .

• -, . , width: 50% .

  flex > content , max-content constraint (, [CSS21]), . flex base size - , .

  , , flex , CSS . , , .

  , flex .

• ,

  flex, , .

  flex , .

, . ( ).

:

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

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

Hide result

, , . , CSS, JS.

Answer 2

, 100% , , . flex: 1 .flex width:50% .box flex-basis: 50%.

, , 123456789ABCDEF, ....

table {
  background-color: yellow;
  box-shadow: inset 0 0 1px red;
  max-width: 100%;
  
  /* You would get similarly strange behavior with collapsing borders: */
  /* border-collapse: collapse; */
}

td {
  background-color: lightgreen;
  box-shadow: inset 0 0 1px blue;
  max-width: 100%;
}

.flex {
  max-width: 100%;
  display: flex;
/* flex: 1;  REMOVE */
  background-color: lightblue;
  box-shadow: inset 0 0 1px black;
  flex-wrap: wrap;
}

.box {
  flex-basis: 50%; /* CHANGED from -> width: 50% */
  background-color: cyan;
  border-radius: 9px;
  box-shadow: inset 0 0 1px red;
}

<table>
  <tr>
    <td>
      <div class="flex">
        <div class="box">
          123456789 ABCDEFGHIJKL <!-- NOTICE THE SPACE!!!!-->
        </div>
        <div class="box">
          meeedium
        </div>
        <div class="box">
          short
        </div>
      </div>
    </td>
  </tr>
</table>

Hide result

Answer 3

min-width . ? ? divs - , .

#container {
  
  width:50%;

  }

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


 .clearfix {
   clear:both;
   }

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

Hide result

Answer 4

, - . .

1) : outter

Set the width of the inner elements to the width of the outter elements with percentage values, so the last element (inner to outer) that you define the width will be the width handler for all its inner elements.

2) Width Handler: Content

Adjust the appearance elements to the width of the content, leaving them without width to wrap the content in the same way that the sock will take the shape of your foot.

In any case, you should consider changing your markup and making it useless, as @Rich fiifi said.