Width 100% isn't working with overflow: auto; - html

Question

I'm having issues having a line of text be hidden by it's parent element. I want it to be dynamic in it's width, but for the life of me I can't figure it out.
.container {
border: 6px solid black;
display: flex;
width: 100%;
}
.die_results {
border: 2px solid green;
display: flex;
width: 100%;
}
.low_rolls_container {
border: 2px solid blue;
width: 100%;
overflow: auto;
}
.low_rolls {
border: 2px solid red;
font-size: 5rem;
padding: 2px 5px 0 0;
white-space: nowrap;
}
<div class="container">
<div class="die_results">
<div class="low_rolls_container">
<div class="low_rolls">1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13</div>
</div>
<div class="high_roll">23</div>
</div>
<div class="die_results">
<div class="low_rolls_container">
<div class="low_rolls">1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13</div>
</div>
<div class="high_roll">23</div>
</div>
</div>
I'm trying to get the Red border box to scroll within the blue border box, all while having the width of "container" and "die_results" be dynamic. Is it possible to do this without using a fixed width somewhere?

Answer 1

The container represents any container whatsoever, the fixed width value of 100px doesn't really matter as the container's width can be fluid and this solution will still work.
I think you've overcomplicated your issue a bit, you've used the correct properties but there's probably been some complications with some of the other properties you've applied.
Using overflow: auto on the container thats holding the content that will overflow will only show a scrollbar if the content inside is actually overflowing, not a static scrollbar as if you were using overflow: scroll.
The border that you see is around the low_rolls-element so you can see when it's overflowing.
.container {
width: 100px;
}
.containertwo {
width: 100%;
}
/* flex for demo purpose, not necessary */
.die_results {
display: flex;
width: 100%;
}
/* force scroll on overflow */
.low_rolls_container {
overflow-x: auto;
}
.low_rolls {
border: 1px solid black;
font-size: .7rem;
padding: 2px 5px 0 0;
white-space: nowrap;
}
<div class="container">
<div class="die_results">
<div class="low_rolls_container">
<div class="low_rolls">1, 2, 3, 6, 2, 3, 6, 5, 5, 7, 9, 1, 2, 3, 6, 2, 3, 6, 5, 5, 7, 9</div>
</div>
<div class="high_roll">23</div>
</div>
</div>
<div class="container containertwo">
<div class="die_results">
<div class="low_rolls_container">
<div class="low_rolls">1, 2, 3, 6, 2, 3, 6, 5, 5, 7, 9, 1, 2, 3, 6, 2, 3, 6, 5, 5, 7, 9</div>
</div>
<div class="high_roll">23</div>
</div>
</div>

Answer 2

Found out the solution below. Needed overflow: hidden; on the container as well.
.container {
display: flex;
}
.die_results {
display: flex;
overflow: hidden;
}
.low_rolls_container {
border: 2px solid blue;
overflow: hidden;
}
.low_rolls {
border: 2px solid red;
font-size: 5rem;
padding: 2px 5px 0 0;
white-space: nowrap;
overflow: auto;
}
<div class="container">
<div class="die_results">
<div class="low_rolls_container">
<div class="low_rolls">1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13</div>
</div>
<div class="high_roll">23</div>
</div>
<div class="die_results">
<div class="low_rolls_container">
<div class="low_rolls">1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13</div>
</div>
<div class="high_roll">23</div>
</div>
</div>