JSFiddle - React, Tailwind, and code Playground

by fainz777

HTML

<div class="wrapper">
	<div class="sidebar">
		<div class="section">
			<div class="sidebar_inner">
				<ul>
					<li>item 01</li>
					<li>item 02</li>
					<li>item 03</li>
					<li>item 04</li>
					<li>item 05</li>
				</ul>
			</div>
		</div>
		<div class="section">
			<div class="sidebar_inner">
				<ul>
					<li>item 01</li>
					<li>item 02</li>
					<li>item 03</li>
					<li>item 04</li>
					<li>item 05</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="main">
		<div class="section">
			<div class="main_inner">
				<p>Вот есть блок контента. Внутри него wrap заданной ширины и margin: auto. И вот в этом блоке есть линии которые должны выходить за его границу влево и вправо и до конца окна браузера при любом разрешении. Самым адекватным способ посчитал сделать их через position:absolute (задал ширину линий 1000px и отпозиционировал куда требовалось) и слева никаких проблем не возникло, а справа появилась полоса прокрутки. Скрыл ее через overflow-x:hidden и довольный результатом продолжил. В конце верстки посмотрел как выглядит в  разных браузерах и вот на устройствах ipad iphone получается так что это полоса в тысячу пикселей справа показывается полностью, и получается огромная пустота справа и узенький сайт слева. Как это исправить? И может быть есть более правильный способ делать такие линии?</p>
			</div>
		</div>
        
        <div class="section">
			<div class="main_inner">
				<p>Вот есть блок контента. Внутри него wrap заданной ширины и margin: auto. И вот в этом блоке есть линии которые должны выходить за его границу влево и вправо и до конца окна браузера при любом разрешении. Самым адекватным способ посчитал сделать их через position:absolute (задал ширину линий 1000px и отпозиционировал куда требовалось) и слева никаких проблем не возникло, а справа появилась полоса прокрутки. Скрыл ее через overflow-x:hidden и довольный результатом продолжил. В конце верстки посмотрел как выглядит в  разных браузерах и вот на устройствах ipad iphone...

CSS

.wrapper {
    overflow: hidden;
}

.sidebar {
    width: 30%;
    float: left;
}

.sidebar_inner {
    width: 200px;
    float: right;
}

.main {
    width: 70%;
    float: left;
}

.main_inner {
    width: 600px;
}

.section {
    border-bottom: 1px solid green;
    overflow: hidden;
}