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

CssFlexbox

Css Problem Overview


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:

<div class="container">
	<div class="box">
		<table>
			<tr>
				<td>Content</td>
				<td>Content</td>
				<td>Content</td>
			</tr>
		</table>	
	</div>
	<div class="box">
		<table>
			<tr>
				<td>Content</td>
			</tr>
		</table>	
	</div>
	<div class="box">
		<table>
			<tr>
				<td>Content</td>
				<td>Content</td>
			</tr>
		</table>	
	</div>
	[...]
</div>

Css Solutions


Solution 1 - Css

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

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.container .box {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  min-width: 100px;
  max-width: 400px;
  height: 200px;
  background-color: #fafa00;
  overflow: hidden;
}

<div class="container">
  <div class="box">
    <table>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
    </table>    
  </div>
  <div class="box">
    <table>
      <tr>
        <td>Content</td>
      </tr>
    </table>    
  </div>
  <div class="box">
    <table>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
    </table>    
  </div>
</div>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAnton HaraldView Question on Stackoverflow
Solution 1 - CssOriolView Answer on Stackoverflow