J'ai besoin de ça:
Largeur du conteneur: largeur fixe, éléments circulant dans le sens des lignes et enveloppant à la fin.
chaque élément doit être max-width: 400px
, le contenu débordant doit être coupé. la largeur minimale des éléments doit être déterminée par le contenu. Toutefois, elle ne doit jamais être inférieure à 200 pixels.
Voici mon code CSS, il ne couvre pas l'aspect "min-content". min-content est suggéré par le w3 dans leur flexbox brouillon de travail, mais cela ne semble pas fonctionner dans mon cas:
.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;
}
et le html est:
<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>
Le problème est que flex: 1
définit flex-basis: 0
. Au lieu de cela, vous avez besoin
.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>