html - float 的 div 必须水平滚动，外部 div 垂直滚动应该适用于两个 div

Question

我想要一种表格结构。第一列是问题，第二列是跨行的评论。

为此我使用了 float 的 div

两者都应该由父级垂直滚动。但是单独的第二列应该包含水平滚动

我能够获得输出，但滚动条只出现在页面底部。

但我想要水平滚动，它应该固定在父 div 的底部，如果我将其作为输出，我将无法滚动第二列及其父级。

Horizo​​ntal Scroll 工作正常。需要解决垂直滚动

如何克服这个问题？

#outer{
    height : 50px;
    overflow-x : hidden;
    overflow-y : scroll;
    border : 1px solid black;
}
#inner1{
    float : left;
    width : 20%;
    height : 100%;
}
#inner2{
    width : 80%;
    height : 100%;
    overflow-y : hidden;
}

.innerSub2{
    width : 800px;
}

<div id="outer">
    <div id="inner1">
        <div class="innerSub1">Question</div>
        <div class="innerSub1">Question</div>
        <div class="innerSub1">Question</div>
        <div class="innerSub1">Question</div>
    </div>
    <div id = "inner2">
        <div class="innerSub2">Comment</div>
        <div class="innerSub2">Comment</div>
        <div class="innerSub2">Comment</div>
        <div class="innerSub2">Comment</div>
    </div>
</div>

`

Answer 1

也许 inner2 div 在 outer div 之上，我不知道有什么更好的。

html {
	height: 100%;
    width: 100%;
}
body {
    margin: 0px;
}
.topicwrap {
    position: relative;
    height: 50px;
    width: 100%;
    overflow : hidden;
    border : 1px solid black;
    margin-bottom: 10px;
}
.outer{
    position: relative;
    height : 50px;    
    overflow-x : hidden;
    overflow-y : scroll;
    z-index: 0;
}
.inner1{
    float : left;
    width : 20%;
    background-color: #CCC;
}
.inner2{
    position: absolute;
    right: 15px;
    top: 0px;   
    width : 80%;
    height: 50px;
    overflow-y : hidden;
    background-color: #E0E0E0;
    z-index: 99;
}
.innerSub1{
    width: 20%;
}
.innerSub2{
    width: 800px;
}

<div class="topicwrap">
<div class="outer">
    <div class="inner1">
        <div class="innerSub1">Question1</div>
        <div class="innerSub1">Question2</div>
        <div class="innerSub1">Question3</div>
        <div class="innerSub1">Question4</div>
        <div class="innerSub1">Question5</div>
        <div class="innerSub1">Question6</div>
    </div><!-- end inner1 -->
</div><!-- end outer -->
    <div class="inner2">
        <div class="innerSub2">Comment1</div>
        <div class="innerSub2">Comment2</div>
        <div class="innerSub2">Comment3</div>
        <div class="innerSub2">Comment4</div>
    </div><!-- end inner2 -->
</div><!-- end topic-wrap -->