My previous question was using min-width to set the width of the containing block, but letting it grow when its children are too big.
This works fine with some types of children (simple divs with their min-width and max-width specified explicitly). Now I am considering more complex options in which children are tables. (Legitimate tables with semantically meaningful rows and columns, not page layout tables.)
These tables do not manually specify min-width or max-width , but the tables have their own maximum and minimum widths corresponding to the width of the table, which will be displayed if there are no line breaks in any of the cells (maximum), and the width that it would have if line break, would insert an insert of all possible line breaks (minimum).
In the existing page layout that I'm trying to replace, the outermost container is a table (bad table) with one cell in one row and CSS width (not min-width ). set your preferred width. When children are tables, they try very hard to fit into the width of the container. A wide table will be displayed with line breaks to make it suitable, and the container will expand only if the child is still not fit after all line breaks are inserted.
In other words, the parent property width considered at least, but it is also a strongly preferred width, which has a higher priority than the preferred child (i.e. maximum).
In contrast, when the parent is a simple div with display:inline-block and the specified min-width , the parent min-width not much preferred. The child prefers to be wider, so the parent expands, even if the child is able to be visualized with a smaller width.
Here is a snippet similar to the one in the previous question that demonstrates all this. The goal is to make the second container the same as the first, somehow more "correct" than using display:table for the layout.
(Please note: the width of the table at the very center of this question is very sensitive to font selection. I hope that Courier New will pass and everyone will see the same width in the fragment.)
var containers = document.querySelectorAll(".container"); for(var i = 0; i < containers.length; ++i) { (function() { var c = containers[i], b = c.nextElementSibling; b.addEventListener("click", function(ev) { big = c.querySelector(".bigchild"); medium = c.querySelector(".mediumchild"); small = c.querySelector(".smallchild"); if(big.style.display != "block" && medium.style.display != "block" && small.style.display != "block") { big.style.display = "block"; } else if(big.style.display == "block") { big.style.display = "none"; medium.style.display = "block"; } else if(medium.style.display == "block") { medium.style.display = "none"; small.style.display = "block"; } else { small.style.display = "none"; } }); })(); }
body { background-color: #ccc; text-align: center; font-size: 14px; font-family: "Courier New"; } table { border-collapse: collapse; } td { border: 1px solid black; padding: 5px; } .container { background-color: white; min-height: 250px; margin-left: auto; margin-right: auto; } .bigchild, .mediumchild, .smallchild { display: none; } button { display: block; margin: 10px auto 20px; } #container1 { display: table; width: 400px; } #container2 { display: inline-block; min-width: 400px; }
<div class="container" id="container1"> <table class="bigchild"> <tr> <td>Lots of</td> <td>columns</td> <td>make this</td> <td>a very</td> <td>wide</td> <td>table</td> <td>that won't</td> <td>fit</td> <td>even with</td> <td>added</td> <td>line breaks</td> </tr> </table> <table class="mediumchild"> <tr> <td>This table</td> <td>is smaller</td> <td>and</td> <td>it fits</td> <td>but</td> <td>only with</td> <td>added</td> <td>line breaks</td> </tr> </table> <table class="smallchild"> <tr> <td>very</td> <td>small</td> </tr> </table> </div> <button>Next</button> <div class="container" id="container2"> <table class="bigchild"> <tr> <td>Lots of</td> <td>columns</td> <td>make this</td> <td>a very</td> <td>wide</td> <td>table</td> <td>that won't</td> <td>fit</td> <td>even with</td> <td>added</td> <td>line breaks</td> </tr> </table> <table class="mediumchild"> <tr> <td>This table</td> <td>is smaller</td> <td>and</td> <td>it fits</td> <td>but</td> <td>only with</td> <td>added</td> <td>line breaks</td> </tr> </table> <table class="smallchild"> <tr> <td>very</td> <td>small</td> </tr> </table> </div> <button>Next</button>