Хорошо. Я только что изменил ваш код, чтобы выглядело так, как я думаю, вы хотите. Обратите внимание, что я использовал display:inline-block
insteed float
si. Я мог бы использовать свойство white-space
.
Ключ должен использовать:
display: flex;
flex-flow: column;
в основном контейнере и flex-grow : 1;
в столбцах, которые вы хотите адаптировать к доступному пространству.
Я использовал height:100%
Я все еще предпочитаю это над vh
единицами:
body, html {
margin: 0;
height:100%;
}
#app-context {
width: 100%;
/*height: 100%;*/
margin: 0;
background-color: grey;
height: 100%;
display: flex;
flex-flow: column;
}
.columns {
/*height: 100%;*/
/*height: 100vh;*/
background-color: lightblue;
overflow:auto;
white-space:nowrap;
flex-grow : 1;
}
.column {
display:inline-block;
width: 340px;
overflow:auto;
background-color: lightgoldenrodyellow;
white-space:normal;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<div id="app-context">
<div class="header-menu"></div>
<div class="tiles">
<div class="tile">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?</div>
<div class="tile">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit, unde. Numquam autem natus molestias eveniet repellat blanditiis ipsa ea. Unde reiciendis dolore et aliquam vero in architecto beatae modi dicta.</div>
<div class="tile">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt deleniti aperiam sint praesentium voluptas ratione dolorem aliquam velit dignissimos. Ea accusantium maxime accusamus ducimus sed! Explicabo sequi quis debitis magni!</div>
<div class="tile">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis natus ipsa inventore numquam quisquam, reiciendis quis earum nemo officiis et tempora magni obcaecati maxime incidunt velit voluptas alias nobis necessitatibus!</div>
</div>
<div class="columns">
<div class="column">
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
</div>
<div class="column">
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
</div>
<div class="column">
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
</div>
<div class="column">
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
</div>
<div class="column">
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
</div>
</div>
</div>
</body>
</html>
JSFIDDLE
Отредактировано Когда вы добавили в свой комментарий, вы хотите прокрутить каждый column ... Вы можете использовать очень простое javascript (jQuery)
для вычисления высоты контейнера заголовка, чтобы задать фиксированную высоту для контейнера столбцов. Затем используйте overflow:auto
только для столбцов, а не для контейнера.
Проверьте это в этом JSFIDDLE