Two responsive/flexible divs side by side - css

Question

I have two responsive divs side by side.
When screen size is smaller than 600px wide, those two divs rearrange one on top of the other, like they should do, BUT... I can't get those two divs to be flexible and 100% wide when screen size gets smaller than 600px.
I've tried flexbox and many other things but just can't get divs flexible. Anyone knows?
body
{
background-color: #fcfcfc;
}
.columns
{
text-align: center;
padding-right: 15px;
padding-left: 15px;
padding-top: 0;
}
.left-div
{
display: inline-block;
max-width: 400px;
text-align: left;
padding: 10px;
background-color: #ddd;
border-radius: 3px;
margin: 5px;
vertical-align: top;
}
.right-div
{
display: inline-block;
max-width: 400px;
text-align: left;
padding: 10px;
background-color: #ddd;
border-radius: 3px;
margin: 5px;
}
.left-text, .right-text
{ text-align:justify;
}
#media screen and (max-width: 600px)
{
.left-div, .right-div
{
max-width: 100%;
}
}
<div class="columns">
<div class="left-div left-text">
<p> Lorem ipsum LEFT.</p>
</div>
<div class="right-div right-text">
<p> Lorem ipsum RIGHT.</p>
</div>
</div>

Answer 1

You need to also make width:100% in addition to specifying the max-width:100%. You also need to add box-sizing:border-box; to avoid some overflow due to the use of padding.
Check the full code, i used 800px instead of 600px so we can see the result here.
body {
background-color: #fcfcfc;
}
.columns {
text-align: center;
padding-right: 15px;
padding-left: 15px;
padding-top: 0;
}
.left-div {
display: inline-block;
max-width: 400px;
text-align: left;
padding: 10px;
background-color: #ddd;
border-radius: 3px;
margin: 5px;
vertical-align: top;
}
.right-div {
display: inline-block;
max-width: 400px;
text-align: left;
padding: 10px;
background-color: #ddd;
border-radius: 3px;
margin: 5px;
}
.left-text,
.right-text {
text-align: justify;
}
#media screen and (max-width: 800px) {
.left-div,
.right-div {
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
}
<div class="columns">
<div class="left-div left-text">
<p> Lorem ipsum LEFT.</p>
</div>
<div class="right-div right-text">
<p> Lorem ipsum RIGHT.</p>
</div>
</div>

Answer 2

Display your elements as block so that they can occupy the full horizontal width available, e.g: display: block;
And for good measure, declare width: 100%
#media screen and (max-width: 600px) {
.left-div,
.right-div {
max-width: 100%;
/* Additional */
width: 100%;
display: block;
}
}
body {
background-color: #fcfcfc;
}
.columns {
text-align: center;
padding-right: 15px;
padding-left: 15px;
padding-top: 0;
}
.left-div {
display: inline-block;
max-width: 400px;
text-align: left;
padding: 10px;
background-color: #ddd;
border-radius: 3px;
margin: 5px;
vertical-align: top;
}
.right-div {
display: inline-block;
max-width: 400px;
text-align: left;
padding: 10px;
background-color: #ddd;
border-radius: 3px;
margin: 5px;
}
.left-text,
.right-text {
text-align: justify;
}
#media screen and (max-width: 600px) {
.left-div,
.right-div {
max-width: 100%;
/* Additional */
width: 100%;
display: block;
}
}
<div class="columns">
<div class="left-div left-text">
<p> Lorem ipsum LEFT.</p>
</div>
<div class="right-div right-text">
<p> Lorem ipsum RIGHT.</p>
</div>
</div>
Or you could "Just use Flex"...
#media screen and (max-width: 600px) {
.columns {
display: flex;
justify-content: center;
flex-direction: column;
}
.left-div,
.right-div {
max-width: 100%;
}
}
body {
background-color: #fcfcfc;
}
.columns {
text-align: center;
padding-right: 15px;
padding-left: 15px;
padding-top: 0;
}
.left-div {
display: inline-block;
max-width: 400px;
text-align: left;
padding: 10px;
background-color: #ddd;
border-radius: 3px;
margin: 5px;
vertical-align: top;
}
.right-div {
display: inline-block;
max-width: 400px;
text-align: left;
padding: 10px;
background-color: #ddd;
border-radius: 3px;
margin: 5px;
}
.left-text,
.right-text {
text-align: justify;
}
#media screen and (max-width: 600px) {
.columns {
display: flex;
justify-content: center;
flex-direction: column;
}
.left-div,
.right-div {
max-width: 100%;
}
}
<div class="columns">
<div class="left-div left-text">
<p> Lorem ipsum LEFT.</p>
</div>
<div class="right-div right-text">
<p> Lorem ipsum RIGHT.</p>
</div>
</div>
Heads up! flex-box has poor or limited support for legacy browsers, so if this is going to be a concern for you, it's probably better not to use it in production.
IE <= 9 - Not Supported
IE 10,11 - Partial Support
See more: https://caniuse.com/#feat=flexbox
Edit: As #TemaniAfif has pointed out in the comments, you should set a border-box property as well, e.g: box-sizing: border-box
.left-text,
.right-text {
text-align: justify;
box-sizing: border-box;
}
Typically, this is set as a global rule, using a global selector, e.g: * { box-sizing: border-box; }
border-box tells the browser to account for any border and padding
in the value you specify for width and height. If you set an element's
width to 100 pixels, that 100 pixels will include any border or
padding you added, and the content box will shrink to absorb that
extra width. This typically makes it much easier to size elements.
Want to learn more? https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing