用换行的内容水平调整HTML对话框标签的大小？
用换行的内容水平调整HTML对话框标签的大小？
提问于 2019-06-11 01:56:02
我有一个充满内容的超文本标记语言dialog标签。我希望内容响应其容器的高度，当内容大于容器时，包装以创建一个新列。出于美观的原因，我对容器的高度也有限制。
我用flex-flow: column wrap实现了这一点，它可以很好地使内容创建一个新列，但包含对话框不会调整大小以包含它。有没有一种方法可以让dialog标记在内容流动时包含其中？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-06-11 03:24:05
这是一个已知的问题：When flexbox items wrap in column mode, container does not grow its width
tl;dr-当前的浏览器不会水平扩展设置了flex: column wrap的flex容器，尽管它们可以为flex: row wrap垂直扩展
Stack Overflow用户
发布于 2019-06-11 02:11:59
以vh单位(垂直高度，其中100表示全窗口高度)添加max-height 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56531285
复制相关文章
相似问题