jquery - 是否有可能有一个没有空白且父级宽度为 100% 的 div？

Question

我在父级中有一个进行水平滚动的 div。我有 css 和 jquery 可以做到这一点，但我不得不使用空白不换行来让内容水平溢出。如果我为所述 div 定义一个设置宽度，例如 55rem，那一切都很好。但是我的网站是响应式的，我无法调整每个维度的宽度...所以我想使用 100% 宽度，但无论我尝试什么，它都会溢出。

我环顾四周，看看是否能找到任何专门谈论这个的东西，但我什至找不到任何东西告诉我由于某种原因这是不可能的。也许我没有使用正确的关键字，我不确定。

为了便于讨论，这里是祖 parent 。

.dashboard_container {
display: table;
height: 100%;
width: 55rem;
margin: auto;
padding-top: 2rem;
}

这是我的 parent 。

.dashboard_post_container {
background: white;
position: relative;
display: inline-table;
-webkit-border-radius: .4rem;
-moz-border-radius: .4rem;
border-radius: .4rem;
margin-bottom: 2rem;
width: 100%;
overflow: hidden;
}

还有 child 。

.dashboard_suggestions {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}

有人评论要求一个例子，所以这里是一个 fiddle :https://jsfiddle.net/08vwyg4b/

您只需将 child 的宽度更改为 100% 即可明白我的意思。

我希望 child 的宽度是 parent 和祖 parent 的 100%...本质上。但我必须使用空白不换行来完成我正在做的事情的主要目标。

Answer 1

很熟悉 ( this link )

只需更改display(阻止)和width属性

.dashboard_container {
    display: block;
    width: 50%; /*Resize for test responsive*/
    /*Your css*/
    }
.dashboard_post_container {
    display: block;
    width: auto;
    /*Your css*/
    }
.dashboard_suggestions {
    width: auto;
    /*Your css*/

    }

DEMO