Два столбца изображений разной ширины. Первое исправлено, второе должно уменьшиться до оставшейся ширины

Question

Я не могу понять, как это сделать.

Пока у меня есть то, что в первом столбце есть

float: left
width: 400px

Но второй столбец просто не уместится в оставшееся пространство, независимо от того, есть ли у них обертка вокруг него, если Оболочка имеет «width: 100%», если она есть на фотографиях, или любую другую комбинацию, которую я пробовал. Как только ширина браузера уменьшается, второй столбец просто переходит в конец первого, он больше не отображается рядом. В сочетании с тем фактом, что изображения второго столбца также должны быть центрированы и не должны расти больше своей естественной ширины, я не знаю, что делать дальше. Ни одно из решений, которые я нашел в Интернете, не имеет примеров изображений.

Код html (flask):

<div class="gallery">
    <div class="thumbnail-container">
        {% for thumb in gallery.thumbs %}
        <img class="thumb" src="{{thumb}}">
        {% endfor %}
    </div>
    <div class="fullsize-container">
        {% for full in gallery.full %}
        <img class="full" src="{{full}}">
        {% endfor %}
    </div>
</div>

Что я хочу на картинке (оба столбца должны быть с независимой прокруткой):

Answer 1

flexbox хорош, но для чего-то такого простого я бы использовал cal c в вашем css. Обратите внимание на использование, которое используется для комментирования в html. мы используем это, чтобы избавиться от пространства между элементами inline-block (если вы удалите его, измените cal c на 100% - 410px:

возможно теперь внутри слева и справа, я мог бы использовать flexbox для остальных .

#left,#right{
border:solid black 1px;
height:250px;
display:inline-block;
}

#left{
width:400px;
}


#right{
width:calc(100% - 404px);
}

html,body{
margin:0;
padding:0;}

<div id='left'>
    
</div><!--    
--><div id='right'>
</div>