Javascript-форум - Сдвиг контента скроллом

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Сдвиг контента скроллом (https://javascript.ru/forum/xhtml-html-css/53991-sdvig-kontenta-skrollom.html)

Сдвиг контента скроллом

имеется вот такая верстка:

для контейнера со списком туду задач установлены свойства:

max-height:300px;
overflow: auto;

Как разультат, при добавление задач в список - появляется скролл.

Так и задумано, но есть проблема - скролл сдвигает контент влево на размер скролла. Поэтому
строка с созданием новой задачи(с синей кнопкой в строке) выглядит нессиметрично со строками задач в списке(с желтой, зеленой и красной кнопками). Как избавиться
от такого сдвига контентента?.. Может кто сталкивался с подобными задачами? Спасибо.

А верстка резиновая? Если нет, то пропиши ширину для инпута жестко.
Если да, то у мня вариантов нет..

Цитата:

Сообщение от FanAizu

имеется вот такая верстка

Это не верстка, это картинка... Ты тестовый пример сделай, тут выложи... Может чего и придумаем.

FanAizu, похоже на твою картинку?

<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
.container {
	margin: 10px;
	border: 1px solid;
}
.item {
	margin: 10px;
	padding-bottom: 10px;
	overflow: hidden;
	border-bottom: 2px solid;
}
.item > div {
	/* вот эту величину нужно синхронизировать */
	width: 500px;
}
.item .box {
	float: left;
	width: 60%;
	height: 30px;
	margin-top: 10px;
	border: 1px solid;
}
.item select {
	margin-top: 15px;
	margin-left: 10px;
}
.list {
	max-height: 100px;
	overflow: auto;
}
.list > .item {
	border-bottom: 1px solid;
}
.list > .item:last-child {
	border-bottom: 0;
}
.list > .item .box {
	background-color: silver;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class='container'>
	<div class='item'>
		<div>
			<div class='box'></div>
			<select>
				<option>default</option>
			</select>
		</div>
	</div>
	<div class='list'>
		<div class='item'>
			<div>
				<div class='box'></div>
				<select>
					<option>default</option>
				</select>
			</div>
		</div>
		<div class='item'>
			<div>
				<div class='box'></div>
				<select>
					<option>default</option>
				</select>
			</div>
		</div>
		<div class='item'>
			<div>
				<div class='box'></div>
				<select>
					<option>default</option>
				</select>
			</div>
		</div>
	</div>
</div>
</body>
</html>

Если у элементов нет фиксированного размера, придется скриптом вычислять циферку (где комментарий)...