是否可能有一个带空白且没有包装且父级宽度为100％的Div？

Question

I have a div within a parent that does horizontal scrolling. I have css and jquery that makes it possible to do such, but I had to use white space no wrap to get the content to overflow horizontally. That all works fine if I define a set width for said div say 55rem for instance. But my website is responsive, I can't adjust the width to every dimension... so I would like to use 100% width, but that overflows no matter what I tried.

I've looked around to see if I could find anything specifically talking about this, and I couldn't even find anything telling me it isn't possible for some reason. Maybe I didn't use the right keywords, I'm not sure.

For argument's sake, here is the grandparent.

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

Here is my 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;
}

And the child.

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

Someone commented requesting an example so here is a fiddle: https://jsfiddle.net/08vwyg4b/

You just need to change the child's width to 100% to see what I mean.

I want the child to be 100% width of the parent and grandparent... essentially. But I must use white space no-wrap to accomplish the main goal of what I'm doing.

Answer 1

It's familiar ( this link )

Just change display (to block) and width attribute

.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