When I shrink the width in responsive design, the text overflows to the next line and the text wrapper expands to fit the parent container. Is there a way to prevent this behavior so that it looks like the red container?
I could add padding to the container (which I will do, about 1em) but that's not exactly what I want since it would always make the text wrapper the same width after overflow. Ideally, I would like the text wrappers to adjust their width based on the content.
For reference, here is the jsFiddle link: https://jsfiddle.net/derive/n2qk03wt/8/
Here is the code for testing:
*, *:before, *:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
html,body {
width: 100%;
height: 600px;
margin: 0;
padding: 0;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
div {
display: flex;
justify-content: center;
align-items: center;
width: 30%;
height: 200px;
margin-bottom: 1em;
}
.red {
background: red;
}
.blue {
width: 20%;
backgroud-color: #064f7f;
}
span {
padding: 1em;
font-size: 25px;
background: white;
text-align: center;
}<div class="red">
<span>some text here</span>
</div>
<div class="blue">
<span>some text here</span>
</div>