Stop text horizontal overflow - css

Question

I have a div and inside of this div is text and this text overflows horizontally and I want to stop that.
Unfortunately, this is a little bit more complicated than it first sounds, because I want to create a div that has two columns and I want the right column to be 30px less wide than the left one.
I know I can solve this by creating two divs, but it would be really cool if there is a way to do this with one div. I was more or less able to do this by working with a parent- and child-element and adding margin-right: -30px; to the child, but unfortunately this margin, even though it is there, seems to collapse into the child and the text complete ignores it.
It would save me quite some work if I could figure this out, any ideas?
Fiddle: https://jsfiddle.net/qxnc3fts/3/
-> GOAL: Make it so that the text does not overflow out of the lightgrey div.
Edit: There is a similar question: Is there a way to specify different widths for columns in CSS3?, and there's a great answer there by #Quentin that definitely helped me but that answer does not make the text break and I would like that to happen. – But it seems like that's impossible. At least in the current CSS-version.
.ref {
width: 200px;
height: 10px;
background-color: black;
}
.parent {
background-color: lightgrey;
width: 400px;
}
.child {
column-count: 2;
column-gap: 30px;
margin-right: -30px;
}
<div class="ref"></div>
<div class="parent">
<div class="child">
i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i
</div>
</div>

Answer 1

Your setting the box as an absolute width and the content no-overflow.
Here's a working solution:
.ref {
width: 200px;
height: 10px;
background-color: black;
}
.parent {
background-color: lightgrey;
width: 400px;
}
.child {
column-count: 2;
column-gap: 3.5%;
margin-right: -30px;
overflow-x: auto, hidden;
padding: 8px 30px;
word-break: keep-all;
display: inline-block;
text-align: center;
}
<div class="ref"></div>
<div class="parent">
<div class="child">
i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i
</div>
</div>