我有一个充满内容的超文本标记语言dialog
标签。我希望内容响应其容器的高度,当内容大于容器时,包装以创建一个新列。出于美观的原因,我对容器的高度也有限制。
我用flex-flow: column wrap
实现了这一点,它可以很好地使内容创建一个新列,但包含对话框不会调整大小以包含它。有没有一种方法可以让dialog
标记在内容流动时包含其中?
发布于 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
垂直扩展
发布于 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>
https://stackoverflow.com/questions/56531285
复制相似问题