小编Osc*_*car的帖子
Flexbox 高度基于第一列中的内容
我正在尝试创建一个“面板”，它分为两个等宽的列，第一个包含文本，第二个包含图像。图像很大，应缩小以覆盖右侧。面板的高度应遵循左侧的文本量。
这就是它应该看起来的样子，图像正在使用，object-fit: cover;以便它完全填充其容器，但我不想max-height: 200px;在 .panel 上。
这是否可能以某种方式实现（最好不使用 JavaScript）？
.panel {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: red;
/* I want this to be flexible based on text in panelText */
/*max-height: 200px;*/
}
.panel .panelText {
padding: 1em;
flex: 1;
width: 50%;
background-color: black;
color: white;
}
.panel .panelImage {
object-fit: cover;
width: 50%;
}<section class="panel">
<div class="panelText">
<h3>This is a header</h3>
<ul>
<li>One one one</li>
<li>Two two two</li>
<li>Three three three</li> …2
推荐指数
推荐指数
1
解决办法
解决办法
3353
查看次数
查看次数