Без изменения размера div, но переполнения тела пользователя (x и y) для просмотра элемента, когда браузер не полноэкранный.

Question

Я хочу создать два вертикальных элемента в одном ряду, не изменяя высоту и ширину элемента, когда браузер работает не во весь экран. И пользователь может использовать тело (прокрутка переполнения), чтобы повернуть оси X и Y, чтобы продолжить чтение этих двух элементов DIV,

но я понятия не имею, как установить его (я пытался float [left /right]).

<style type="text/css">
html, body{
    height:100%;
    margin:0;
    padding:0;
}
body{
    overflow: scroll;
}
</style>
<div style="display:flex;">
    <div style="min-width:50%;height:100%;border:solid silver 1px;">LeftLeftLeftLeftLeftLeft.......repeat.....</div>
    <div style="min-width:50%;height:100%;border:solid silver 1px;">RightRightRight.....repeat.......</div>
</div>

Answer 1

Как насчет использования display: flex в теге body - или лучше в контейнере div?

<div style="display:flex;">
<div style="min-width:400px;height:400px;border:solid silver 1px;">Left</div>
<div style="min-width:400px;height:400px;border:solid silver 1px;">Right</div>
</div>

Answer 2

Это код для 2 делений в строке с переполнением, установленным для прокрутки с установленной высотой 200 пикселей и шириной 50%.

для php / html используйте это

<div class="main">
<div class="left scroll">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="right scroll">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

и для css попробуйте это

.main{
    display: flex;
    flex-direction: row;
}
.left{
    background-color: red;
}
.right{
    background-color: yellow;
}
.scroll{
    overflow: scroll;
    width: 50%;
    height: 100px;
}

Answer 3

Если вам нужно поддерживать очень старые браузеры (отметьте https://caniuse.com/#search=flex), то я предлагаю вам использовать таблицы.Поплавки также могут работать, если вы можете фиксировать ширину контейнера.В противном случае, идти с таблицей.

<style type="text/css" rel="stylesheet">
    .holder {
        display:flex;
    }
    .holder>* {
        flex-shrink:0;
        box-sizing:border-box;
        border:solid 1px silver;
        width:50%;
        overflow:hidden;
    }
</style>
<div class="holder">
    <div>Left</div>
    <div>Right</div>
</div>