Запретить размещение элементов в новых строках при их создании, но разрешить прокрутку x в контейнере элементов

Question

Я разрабатываю приложение, в котором вы можете создавать множество столбцов с текстовыми полями. Эти столбцы создаются пользователем и помещаются в «контейнер столбцов».

Дело в том, что при создании нового контейнера недостаточно места, чтобы показать его размещение в новом ряду. Я хотел бы добиться создания нескольких из этих столбцов с помощью X-overlfow, чтобы я мог прокручивать по горизонтали вместо того, чтобы получать бесконечные новые строки.

Я пробовал это на оболочке CSS:

overflow-x: scroll;

И это CSS каждого столбца:

  height: calc(100% - 10%); 
  height: -moz-calc(100% - 10%);
  height: -webkit-calc(100% - 10%);
  float: left;
  overflow:hidden;
  overflow-y:scroll;

Answer 1

Это было бы сложно, если вы хотите использовать float. Но довольно просто, если вы можете изменить свои элементы на inline-block insteed, что, основываясь на вашем вопросе, я думаю, что это не нарушит ваш макет (и вы можете сохранить размер каждого столбца). Тогда вам просто нужно добавить white-space:nowrap в контейнер. Как это:

.container {overflow:auto; white-space:nowrap;}
.container div {
  width:140px;
  height:100px;
  background-color:red;
  margin-right:10px;
  margin-bottom:10px;
  display:inline-block;
  }

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>