如果没有调整div的大小，但是当浏览器不是全屏时，用户主体会溢出（x和y）来浏览元素

Question

当浏览器不是全屏时，我想在同一行中设计两个垂直div而不更改div的高度和宽度。并且用户可以使用主体（溢出滚动条）旋转x和y轴，以继续读取两个DIV元素，

但是我不知道要设置它（我尝试过float [left / right]）。

function

Answer 1

如果您需要支持非常旧的浏览器（请检查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>

Answer 2

在主体标签中使用display：flex更好-在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 3

这是连续2个div的代码，溢出设置为以200px的高度和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;
}