Overflow

Problem overflwoing

HTML

<body>

<div id="wrapper">
	<div class="process">
		<div>
			<header>Idle</header>
		<p>
		1009999999 <span class="date">2017-06-15</span>
		<span class="details">Additional data needed for the order, 2 rows maximum.</span>
		</p>
		<p>
		<span class="warning">1009999999</span> <span class="date warning">2017-06-15</span>
		<span class="details">Additional data needed for the order, 2 rows maximum.</span>
		</p>
		<p>
		1009999999 <span class="date">2017-06-15</span>
		<span class="details">Additional data needed for the order, 2 rows maximum.</span>
		</p>        
		</div>
		<div>
			<header>Weighing</header>
		 <p>
		1009999999 <span class="date">2017-06-15</span>
		<span class="details">Additional data needed for the order, 2 rows maximum.</span>
		</p>
		<p>
		1009999999 <span class="date">2017-06-15</span>
		<span class="details">Additional data needed for the order, 2 rows maximum.</span>
		</p>
		<p>
		<span class="error">1009999999</span> <span class="date error">2017-06-15</span>
		<span class="details">Additional data needed for the order, 2 rows maximum.</span>
		</p>
		<p>
		1009999999 <span class="date">2017-06-15</span>
		<span class="details">Additional data needed for the order, 2 rows maximum.</span>
		</p>
		</div>
		<div>
			<header>Mixing</header>
		</div>
		<div>
			<header>Pressing</header>
		</div>
		<div>
			<header>Done</header>
		</div>
	</div>
	<div class="process">
		<div>
			<header>Idle</header>
			<p>
			1009999999 <span class="date">2017-06-15</span>
			<span class="details">Additional data needed for the order, 2 rows maximum.</span>
			</p>
			<p>
			<span class="warning">1009999999</span> <span class="date warning">2017-06-15</span>
			<span class="details">Additional data needed for the order, 2 rows maximum.</span>
			</p>
			<p>
			1009999999 <span class="date">2017-06-15</span>
			<span class="details">Additional data needed for the order, 2 rows maximum.</span>
			</p>       ...

CSS

body,html {
		margin:0;
		padding:0;
		height:100%;
		width:100%;
		font-size:1em;
	}
	
	* {
		box-sizing:border-box;
	}
	
	#wrapper {
		height:100%;
		width:100%;
		display:inline-block;
		position:relative;
	}
	
	
	.process {
		display:table;
		table-layout: fixed;
		width:100%;
	}
	
	.process div {
		display:table-cell;
		position:relative;
	}
	
	.process div:nth-child(even) {
	background-color:#edf0f6;
	}

	.process div:nth-child(odd) {
		background-color:#fafcff;
	}