Html CSS div溢出：自动不起作用

我的div溢出不工作

链接：

HTML:

6个div（变量、类型、comp1、extern1、coords1和id1）应该在一行中，但我不知道为什么溢出不起作用

问题在于

div#variablesContainer {
    width: auto;
    height: auto;
    position: relative;
    float:left
}

通过设置width:auto，您告诉容器适应其父元素的宽度，而不是其内容

试宽：900px；它会起作用的。

试试这个

HTML

---

很少的css更改将使div可滚动

1） 删除float:left并将display:table单元格属性添加到div.variablesDiv。您已经在两个地方为variablesDiv声明了css。删除声明中的任何一项，并对div.variablesDiv使用以下css

2） 将div.modalDialog的溢出属性修改为overflow-x:scroll

div.modalDialog {
   width: 600px;
   height:auto;
   overflow-x:scroll;
   background-color: #F0F0F0;
   top: 10%;
}

---

您期望的行为是什么？@paul您有填充，另外，所有6个div的宽度都是固定的。我想这一切都是自动的。所以你必须改变任何一个，要么是填充，要么是总宽度。可能是因为宽度，加上填充等对容器来说太大了？再加上你让它们浮动，这意味着当没有足够的空间时，它们将转到下一行。我希望div（变量、类型、comp1、extern1、coords1和id1）显示在一行中，因为没有足够的空间，它应该显示带有“width:900px”的滚动条，但在我的程序中，通过单击特定按钮，将添加一个新列（-div），然后将不再使用width:900px；这就是我设置width:auto的原因，因为我认为容器将根据其子节点的宽度调整其宽度；回调应该计算新的大小并在容器上设置它。

div#variablesContainer {
    width: auto;
    height: auto;
    position: relative;
    float:left
}

<div class="modalDialog" id="chooseVariableDialog">
     <h4>Choose Variables</h4>

    <div class="" id="variablesContainer">
        <div class="variablesDivWraper">
            <div class="variablesDiv">
                <div class="variablesType">Variables</div>
            </div>
            <div class="variablesDiv">
                <div class="variablesType">Type</div>
            </div>
            <div class="variablesDiv">
                <div class="variablesType">comp1</div>
            </div>
            <div class="variablesDiv">
                <div class="variablesType">extern1</div>
            </div>
            <div class="variablesDiv">
                <div class="variablesType">coord1</div>
            </div>
            <div class="variablesDiv">
                <div class="variablesType">id1</div>
            </div>
        </div>
    </div>
</div>

var variablesDivCount = $('.variablesDiv').length;
$('.variablesDivWraper').width(variablesDivCount * 150);

div.variablesDiv {
   /*float: left;*/
   width: 150px;
   align-content: center;
   display: table-cell;
}

div.modalDialog {
   width: 600px;
   height:auto;
   overflow-x:scroll;
   background-color: #F0F0F0;
   top: 10%;
}