如何让 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/

更新

如果你需要对图片进行绝对定位，你需要固定图片容器的高度，如此fiddle:

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

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

How do I make a flexbox container surround absolutely-positioned content?

css

flexbox