Modal Pop with Flex Column不允许内容占据自己的高度，而是缩小了它？
Modal Pop with Flex Column不允许内容占据自己的高度，而是缩小了它？
提问于 2020-10-12 14:05:20
我有模式弹出窗口与以下结构：
问题是，当我在移动设备上打开它时，文本块被切断了，并且无论高度如何，都被制作成适合弹出窗口。如何使其适合内容？我们的目标是让文本元素在它的完整高度之后，图像，如果它们大于要在弹出窗口中滚动的视区。
当视区高度低于400px，图像几乎占据了视区的一半，并且看不到文本时，问题就出现了。
.modal-pop {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #eeeeee;
}
.modal-pop .wrapper {
display: flex;
width: calc(100vw - 40px);
height: calc(100vh - 40px);
flex-direction: column-reverse;
justify-content: flex-end;
overflow: auto;
}
.modal-pop .cover {
width: 100%;
max-width: 100%;
height: 180px;
}
.modal-pop .text {
padding: 25px 15px 5px 15px;
width: 100%;
max-width: 100%;
overflow: auto;
height: 100%;
}<div class="modal-pop">
<div class="wrapper">
<div class="cover">
<img src="https://www.publicdomainpictures.net/pictures/320000/velka/background-image.png">
</div>
<div class="text">
<h2 class="title">Some test title</h2>
<div class="pop-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Consequuntur dignissimos ducimus enim, error exercitationem facere facilis impedit, in ipsa, iste libero magni odio odit praesentium quaerat quo rerum sed voluptatum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Consequuntur dignissimos ducimus enim, error exercitationem facere facilis impedit.</p>
<p>In ipsa, iste libero magni odio odit praesentium quaerat quo rerum sed voluptatum?</p>
</div>
</div>
</div>
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-12 16:19:36
下面是我为使其正常工作所做的设置，我注释了类中的以下属性，并调整img宽度以适应容器：
.modal-pop .wrapper {
/*justify-content: flex-end;*/
}
.cover img {
max-width: 100%;
}
.modal-pop .text {
/*overflow: auto;
height: 100%;*/
}您的水平滚动是由于：
.modal-pop .text {
padding: 25px 15px 5px 15px;
}所以移除/调整它，它就应该消失了。你需要用媒体查询来调整它。
演示
.modal-pop {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #eeeeee;
}
.modal-pop .wrapper {
display: flex;
width: calc(100vw - 40px);
height: calc(100vh - 40px);
flex-direction: column-reverse;
/*justify-content: flex-end;*/
overflow: auto;
}
.modal-pop .cover {
width: 100%;
max-width: 100%;
height: 180px;
}
.cover img {
max-width: 100%;
}
.modal-pop .text {
padding: 25px 15px 5px 15px;
width: 100%;
max-width: 100%;
/*overflow: auto;
height: 100%;*/
}<div class="modal-pop">
<div class="wrapper">
<div class="cover">
<img src="https://www.publicdomainpictures.net/pictures/320000/velka/background-image.png">
</div>
<div class="text">
<h2 class="title">Some test title</h2>
<div class="pop-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Consequuntur dignissimos ducimus enim, error exercitationem facere facilis impedit, in ipsa, iste libero magni odio odit praesentium quaerat quo rerum sed voluptatum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Consequuntur dignissimos ducimus enim, error exercitationem facere facilis impedit.</p>
<p>In ipsa, iste libero magni odio odit praesentium quaerat quo rerum sed voluptatum?</p>
</div>
</div>
</div>
</div>
</div>
使用顺序而不是列反转的DEMO：
.modal-pop {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #eeeeee;
}
.modal-pop .wrapper {
display: flex;
width: calc(100vw - 40px);
height: calc(100vh - 40px);
flex-direction: column;
/*flex-direction: column-reverse;
justify-content: flex-end;*/
overflow: auto;
}
.modal-pop .cover {
width: 100%;
max-width: 100%;
height: 180px;
}
.cover img {
max-width: 100%;
}
.modal-pop .text {
padding: 25px 15px 5px 15px;
width: 100%;
max-width: 100%;
/*overflow: auto;
height: 100%;*/
}
.order-1{
order: 1;
}
.order-2{
order: 2;
}<div class="modal-pop">
<div class="wrapper">
<div class="cover order-2">
<img src="https://www.publicdomainpictures.net/pictures/320000/velka/background-image.png">
</div>
<div class="text order-1">
<h2 class="title">Some test title</h2>
<div class="pop-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Consequuntur dignissimos ducimus enim, error exercitationem facere facilis impedit, in ipsa, iste libero magni odio odit praesentium quaerat quo rerum sed voluptatum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Consequuntur dignissimos ducimus enim, error exercitationem facere facilis impedit.</p>
<p>In ipsa, iste libero magni odio odit praesentium quaerat quo rerum sed voluptatum?</p>
</div>
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64312473
复制相关文章
相似问题
腾讯云开发者
