当孩子是桌子时,min-width不够强烈

Question

我之前的问题得到了一个答案,min-width用于设置包含块的宽度,但允许它在其子项太大时增长.

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

没有手动指定min-width或max-width在这些表上,但表具有固有的最大和最小宽度,对应于表格在任何单元格中没有换行符时所具有的宽度(最大值)和宽度插入换行符插入所有可能的换行符(最小值).

在我试图替换的现有页面布局中,最外面的容器是一个表(坏表的类),单个单元格在一行中,CSS width(不min-width)设置为首选宽度.当孩子们是桌子时,他们会很难适应容器的宽度.将使用换行符呈现宽表以使其适合,并且只有在插入所有换行符后子项仍然不适合时,容器才会展开.

换句话说,父项的width属性被视为最小值,但它也是一个强烈优选的宽度,其优先级高于子项的首选(即最大)宽度.

相反,当父级是带有display:inline-block指定的普通div时min-width,父级min-width不是强烈优选的.孩子喜欢更宽,所以即使孩子能够以较小的宽度进行渲染,父母也会扩张.

这是一个片段,很像上一个问题中的一个片段,它展示了所有这些.目标是使第二个容器以某种方式像第一个容器一样,比使用display:table布局更"合适" .

(注意:这个问题核心的表格宽度对字体的选择非常敏感.我希望Courier New能够通过并且每个人在片段中看到相同的宽度.)

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;}，模供应商前缀，就是你想要的。