0
UIフロントではあまり働いていません。私はメインのdivと2つのネストされたdivを持っています。 2つのdivは、他にも表示されますが、ウィンドウのサイズを変更するとdivのスタックが上下に重なって表示されます。私の要件は、私はウィンドウのサイズを変更しますが、他のものに加えてdivを配置する必要があります。ブラウザのウィンドウにスクロールバーが水平にスクロールしてコンテンツを見たい場合は右にスクロールする必要があります。ブラウザウィンドウのサイズを変更すると、HTML DIVが重なり合って表示される
さまざまなアプローチを試しましたが、成功できませんでした。
body {
background-color: white;
}
#mainContainer {
overflow: hidden
}
#firstBox {
background-color: gray;
margin: 10px;
padding: 10px;
overflow-x: auto;
width: 45%;
height: 30%;
float: left;
display: inline-block;
}
#secondBox {
background-color: gray;
margin: 10px;
padding: 10px;
overflow: auto;
width: 45%;
height: 30%;
float: left;
display: inline-block;
position: fixed;
}<div id="mainContainer">
<div id="firstBox" class="gridContainer">
Lorem ipsum dolor sit amet, nullam eros posuere quam, non ipsum ornare vehicula. In integer, ac tempus aenean lorem nec amet ac, non blandit class, eget odio eu, mollis mauris massa. In augue erat convallis, morbi lectus lobortis tempor in lorem. Dis
et morbi consectetuer non, tempor pretium. Leo dolor erat orci, lobortis adipisicing scelerisque integer diam lorem, tempus non, dolor libero vivamus velit. Viverra ipsum quam id in arcu, ligula tortor laoreet fermentum sit ipsum. Erat dapibus nulla
justo vitae, feugiat nullam felis sollicitudin, dolor wisi mauris, tristique tempus nunc tristique. Velit non, duis auctor a. Ipsum pede maecenas vestibulum id ornare, ac facilisi wisi maecenas sem ultrices, non pede cupiditate mollis lorem condimentum,
suscipit integer etiam mauris amet. Magna rutrum cras, tincidunt lacus ut, lectus donec
</div>
<div id="secondBox" class="gridContainer">
Lorem ipsum dolor sit amet, nullam eros posuere quam, non ipsum ornare vehicula. In integer, ac tempus aenean lorem nec amet ac, non blandit class, eget odio eu, mollis mauris massa. In augue erat convallis, morbi lectus lobortis tempor in lorem. Dis
et morbi consectetuer non, tempor pretium. Leo dolor erat orci, lobortis adipisicing scelerisque integer diam lorem, tempus non, dolor libero vivamus velit. Viverra ipsum quam id in arcu, ligula tortor laoreet fermentum sit ipsum. Erat dapibus nulla
justo vitae, feugiat nullam felis sollicitudin, dolor wisi mauris, tristique tempus nunc tristique. Velit non, duis auctor a. Ipsum pede maecenas vestibulum id ornare, ac facilisi wisi maecenas sem ultrices, non pede cupiditate mollis lorem condimentum,
suscipit integer etiam mauris amet. Magna rutrum cras, tincidunt lacus ut, lectus donec,
</div>
</div>
...！その作業は適切に – Bhargav
「位置：固定」を#secondBoxに追加した後は正しく動作しています（divの配置は最初の要件です）。しかし、ブラウザウィンドウのサイズを水平に変更すると、divテキストの代わりにウィンドウを調整する私は2番目のdivを見るためにスクロールできるようにブラウザウィンドウのスクロールバーを水平にしたい。 – TechLife
divを使用するにはmin-widthを使用すると縮小しません。次に、parent overflow-x：autoを設定します。 –