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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (6)

CodePen

我有一个dialog充满内容的HTML 标记。我希望内容响应其容器的高度,包装以在内容大于容器时创建新列。出于美学原因,我对容器的高度也有界限

我正在完成这个flex-flow: column wrap并且可以正常工作以使内容创建一个新列,但是包含对话框没有调整大小以包含它。有没有办法让dialog标签在流动时成长为包含内容?

提问于
用户回答回答于

max-heightvh单位添加CSS属性(垂直高度,其中100是完整窗口高度)。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>

扫码关注云+社区

领取腾讯云代金券