Как создать контейнер 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 изображения путает расположение в нем выталкивает его из потока элементов, и поэтому вы не можете lev удалите flexbox так, как вы хотите. Я:

• либо только показать на изображение программно
• показывают только первое изображение с помощью CSS

Я сделал некоторые изменения и предложения для второго варианта: http://jsfiddle.net/vuz9wzx5/2/

Обновление

Если вам необходимо abso лютня позиционирования для изображения, необходимо зафиксировать высоту контейнера изображения, как в этой скрипке:

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