Question

我有一个充满内容的HTML dialog标签。我希望内容响应其容器的高度，当内容大于容器时，包装以创建一个新列。出于审美原因，我对容器的高度也有限制

我正在用flex-flow: column wrap完成此操作，并且可以很好地使内容创建一个新列，但是包含对话框的大小并未调整为包含它。有没有一种方法可以使dialog标签随着内容的流动而增长呢？

Answer 1

这是一个已知的问题：When flexbox items wrap in column mode, container does not grow its width

tl; dr-当前的浏览器不会水平扩展设置了flex: column wrap的flex容器，尽管它们确实会垂直扩展flex: row wrap

Answer 2

以max-height单位（垂直高度，其中100是全窗口高度）添加vh CSS属性。 CodePen

.country-selector-stylized-dialog .country-selector-container {
  display: flex;
  flex-flow: column wrap;
  height: 10em;
  max-height: 60vh;
}

  <dialog class="country-selector-stylized-dialog" open="">
    <div class="country-selector-container">
      <div class="country-selector-item country-selector-current-item"> Ireland </div>
      <div class="country-selector-item"> Australia </div>
      <div class="country-selector-item"> België </div>
      <div class="country-selector-item"> Brazil </div>
      <div class="country-selector-item"> Canada </div>
      <div class="country-selector-item"> Danmark </div>
      <div class="country-selector-item"> Deutschland </div>
      <div class="country-selector-item"> España </div>
      <div class="country-selector-item"> France </div>
      <div class="country-selector-item"> India </div>
      <div class="country-selector-item"> Italia </div>
      <div class="country-selector-item"> Nederland </div>
      <div class="country-selector-item"> New Zealand </div>
      <div class="country-selector-item"> Norge </div>
      <div class="country-selector-item"> Österreich </div>
      <div class="country-selector-item"> Schweiz </div>
      <div class="country-selector-item"> Singapore </div>
      <div class="country-selector-item"> Suomi </div>
      <div class="country-selector-item"> Sverige </div>
      <div class="country-selector-item"> United Kingdom </div>
      <div class="country-selector-item"> United States </div>
      <div class="country-selector-item"> 日本 </div>
    </div>
  </dialog>

使用包装的内容水平调整HTML对话框标签的大小？

2 个答案: