Set min-width either by content or 200px whichever is greater together with max-width

Question

I need this   Container width is fixed width  items flowing in the row direction and wrapping at the end   each item should be max-width  400px  overflowing content should be cut   The minimum width of the items should be determined by the content  however  it should never be shorter than 200px   Here is my CSS code  it does not cover the  min-content  aspect  min-content is suggested by the w3 in their Flexbox working draft  but it does not seem to work in my case    container       display  -webkit-flex      display  flex      -webkit-flex-wrap  wrap      flex-wrap  wrap      container  box       -webkit-flex  1      flex  1      min-width  200px      max-width  400px      height  200px      background-color   fafa00      overflow  hidden      and the HTML is    lt div class  container  gt       lt div class  box  gt           lt table gt               lt tr gt                   lt td gt Content lt  td gt                   lt td gt Content lt  td gt                   lt td gt Content lt  td gt               lt  tr gt           lt  table gt           lt  div gt       lt div class  box  gt           lt table gt               lt tr gt                   lt td gt Content lt  td gt               lt  tr gt           lt  table gt           lt  div gt       lt div class  box  gt           lt table gt               lt tr gt                   lt td gt Content lt  td gt                   lt td gt Content lt  td gt               lt  tr gt           lt  table gt           lt  div gt             lt  div gt

User · Answer

The problem is that flex  1 sets flex-basis  0  Instead  you need   container  box     min-width  200px    max-width  400px    flex-basis  auto     default value      flex-grow  1       x000D   x000D   container   x000D    display  -webkit-flex  x000D    display  flex  x000D    -webkit-flex-wrap  wrap  x000D    flex-wrap  wrap  x000D    x000D   x000D   container  box   x000D    -webkit-flex-grow  1  x000D    flex-grow  1  x000D    min-width  100px  x000D    max-width  400px  x000D    height  200px  x000D    background-color   fafa00  x000D    overflow  hidden  x000D    x000D   lt div class  container  gt  x000D     lt div class  box  gt  x000D       lt table gt  x000D         lt tr gt  x000D           lt td gt Content lt  td gt  x000D           lt td gt Content lt  td gt  x000D           lt td gt Content lt  td gt  x000D         lt  tr gt  x000D       lt  table gt      x000D     lt  div gt  x000D     lt div class  box  gt  x000D       lt table gt  x000D         lt tr gt  x000D           lt td gt Content lt  td gt  x000D         lt  tr gt  x000D       lt  table gt      x000D     lt  div gt  x000D     lt div class  box  gt  x000D       lt table gt  x000D         lt tr gt  x000D           lt td gt Content lt  td gt  x000D           lt td gt Content lt  td gt  x000D         lt  tr gt  x000D       lt  table gt      x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

[css] Set min-width either by content or 200px (whichever is greater) together with max-width

Examples related to css

Examples related to flexbox