当孩子是一张桌子时，最小宽度不够强烈

Question

我之前的问题有一个answer 使用min-width 来设置包含块的宽度，但是当它的孩子太大时允许它增长。

这适用于某些类型的孩子（明确指定自己的min-width 和max-width 的简单div）。现在我正在研究一个更复杂的变化，其中孩子是桌子。 （具有语义上有意义的行和列的合法表，而不是页面布局表。）

这些表格上没有手动指定的min-width 或max-width，但表格具有固有的最大和最小宽度，对应于表格在任何单元格中没有换行符的情况下呈现的宽度（最大值）和插入所有可能的换行符的宽度（最小值）。

在我试图替换的现有页面布局中，最外面的容器是一个表格（一种糟糕的表格），单行中有一个单元格，CSS width（不是min-width）设置为首选宽度。当孩子们是桌子时，他们会非常努力地适应容器的宽度。宽表将用换行符呈现以使其适合，并且仅当插入所有换行符后子 仍然 不适合时，容器才会展开。

换句话说，父级的width 属性被视为最小值，但它也是一个强首选宽度，其优先级高于子级的首选（即最大）宽度。

相比之下，当父级是带有display:inline-block 和指定min-width 的普通div 时，父级的min-width 不是首选。子代更喜欢更宽，因此父代会扩展，即使子代能够以较小的宽度呈现。

这是一个 sn-p，很像上一个问题中的那个，它演示了所有这些。目标是让第二个容器在某种程度上表现得像第一个容器，这比使用display:table 进行布局更“正确”。

（注意：这个问题的核心表格宽度对字体的选择非常敏感。我希望 Courier New 能够通过，并且每个人都能在 sn-p 中看到相同的宽度。）

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>

Answer 1

我认为.container {min-width: 400px;width: min-content;}，模供应商前缀，是你想要的。