Menu
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> 
423
And min-width specify lower bound for width. So the width of the element will vary from min-width to ... (it will depend on other style). So if you specify min-width and max-width , you will set up a lower and upper bound and if both are equal it will be the same as simply specifing a width .
If you want to include both min and max width for responsiveness in the browser, then you can use the following: @media (min-width: 768px) and (max-width: 992px){...} @media (min-width: 480px) and (max-width: 767px) {...}
Max-width and min-width can be used together to target a specific range of screen sizes. @media only screen and (max-width: 600px) and (min-width: 400px) {...} The query above will trigger only for screens that are 600-400px wide. This can be used to target specific devices with known widths.
Change the maximum width. max-width overrides width , but min-width overrides max-width .
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
