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

Question

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

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

为了争论，这里是祖父母。

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

这是我的父母。

.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;
}

还有孩子。

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

有人评论要求提供示例，所以这里是一个小提琴：https://jsfiddle.net/08vwyg4b/

您只需将孩子的宽度更改为 100% 即可了解我的意思。

我希望孩子是父母和祖父母的 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