如何让 flexbox 容器围绕绝对定位的内容？

Question

我正在开发一个网站，我想在左侧显示幻灯片，并在右侧显示一些描述幻灯片的文字。目前，我正在为幻灯片使用 flexbox 和一些绝对定位的图像。我还在我的内容周围使用了一个 div 来提供一个框架。但是，div 不会环绕元素的整个高度，从而使图像溢出框架。是否可以让 div 完全环绕幻灯片图像，而只在 CSS 中提供最大和最小宽度？

这是我目前拥有的：

HTML：

<div class="container">
    <div class="content">
        <div class="slides">
            <img src="http://placehold.it/2048x1365">
            <img src="http://placehold.it/2048x1365">
        </div>
    </div>
    <div class="content">
        <p>This is some content.</p>
        <p>This is some more content.</p>
        <p>This is some more content.</p>
        <p>This is some more content.</p>
    </div>
</div>

CSS：

.container {
    display: flex;
    justify-content: center;
    margin: 30px;
}
.content {
    background: red;
    flex: auto;
    flex-direction: column;
    min-width: 30em;
    max-width: 38em;
    padding: 10px;
    margin: 5px;
}
.slides {
    position: relative;
    width: 100%;
    height: 100%;
}
.content img {
    width: 100%;
    height: auto;
    position: absolute;
    display: block;
}

jsfiddle：http://jsfiddle.net/vuz9wzx5/2/

Answer 1

图像的position: absolute 将布局从元素流中拉出来，因此您无法按照您想要的方式利用 flexbox。 我会：

• 要么仅以编程方式显示在图像上
• 使用 CSS 仅显示第一张图片

我对选项二进行了一些更改和建议： http://jsfiddle.net/vuz9wzx5/2/

更新

如果您需要对图像进行绝对定位，则需要固定图像容器的高度，如下所示：

http://jsfiddle.net/vuz9wzx5/3/