Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class=wide>
div, div
    <div class=flex>
        <div class=b>Loreeeeeeeem</div>
        <div class=c>
            <div>iiiiiiiiiipsum</div>
            <div>iiiiiiiiii psum</div>
        </div>
    </div>
div, table {width:auto}
    <div class=flex>
        <div>Loreeeeeeeem</div>
        <table>
            <tr><td>iiiiiiiiiipsum
            <tr><td>iiiiiiii psum
        </table>
    </div>
div, table{width:fill}
    <div class=flex>
        <div>Loreeeeeeeem</div>
        <table class=fill>
            <tr><td>iiiiiiiiiipsum
            <tr><td>iiiiiiii psum
        </table>
    </div>
div, table{width:100%}
    <div class=flex>
        <div>Loreeeeeeeem</div>
        <table class=pc>
            <tr><td>iiiiiiiiiipsum
            <tr><td>iiiiiiii psum
        </table>
    </div>
</div>
​
<hr>
​
<div class=narrow>
div, div
    <div class=flex>
        <div class=b>Loreeeeeeeem</div>
        <div class=c>
            <div>iiiiiiiiiipsum</div>
            <div>iiiiiiii psum</div>
        </div>
    </div>
div, table {width:auto}
    <div class=flex>
        <div>Loreeeeeeeem</div>
        <table>
            <tr><td>iiiiiiiiiipsum
            <tr><td>iiiiiiii psum
        </table>
    </div>
div. table{width:fill}
    <div class=flex>
        <div>Loreeeeeeeem</div>
        <table class=fill>
            <tr><td>iiiiiiiiiipsum
            <tr><td>iiiiiiii psum
        </table>
    </div>
div, table{width:100%}
    <div class=flex>
        <div>Loreeeeeeeem</div>
        <table class=pc>
            <tr><td>iiiiiiiiiipsum
            <tr><td>iiiiiiii psum
        </table>
    </div>
​
</div>
    </body>
</html>
 
.flex {
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}
.flex > * { flex: 1;}
.fill {
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill;
}
.pc {   width: 100%; }
​
​
​
.narrow {   width: 150px; }
.wide { width: 300px;}
​
​
/* giving the table the same size as the div */
table, tr, td {
    border-collapse: collapse;
    padding: 0 !important;
}
​
​
/*making things go red and green */
​
/* red when the items don't fill the flex */
.flex { background: red; }
​
/* Red when an item is wider than half the wide container */
.flex > * { background: linear-gradient(to right, green, green 150px, red ); }
​
/* Red when Safari make the flex items overflow the flex container */
body { line-height: 1; }
.narrow .flex { min-height: 3em; }
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
frivoalpro
0viewers