Fluid колонны с одной максимальной ширины колонки

Question

Я пытаюсь сделать макет в две колонки, где:

первый Col: Имеет максимальную ширину сказать 200px второй Col: Заполняет оставшееся пространство

I попробовали несколько примеров, но не смогли добиться желаемого эффекта.

Поскольку 1-й столбец не будет фиксированной шириной, позиционирование, которое абсолютно и добавление левого края во второй столбец, оставляет пустое расстояние.

Может ли кто-нибудь мне помочь?

Answer 1

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

Краткий обзор: http://learnlayout.com/flexbox.html
Более подробно: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

Или, может быть, если ваш случай использования очень прост, вы можете использовать только calc функцию в CSS. Например:

#first { 
    width: 200px; 
} 

#second { 
    width: calc(100% - 200px); 
} 

Answer 2

Вы можете сделать это с Flexbox

.content { 
 
    display: flex; 
 
    min-height: 100vh; 
 
} 
 

 
.col:nth-child(1) { 
 
    max-width: 200px; 
 
    background: lightblue; 
 
} 
 

 
.col:nth-child(2) { 
 
    flex: 1; 
 
    background: lightgreen; 
 
}

<div class="content"> 
 
    <div class="col"><strong>Col 1</strong><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur odit necessitatibus illum officiis. Qui fugiat quisquam sequi, vel maxime earum id, officiis labore itaque debitis dolor laboriosam ipsam, dignissimos ullam. </div> 
 
    <div class="col"><strong>Col 2</strong></div> 
 
</div>