max-width not changing width of my divs - html

Question

I've been following a css and html tutorial at udacity.
My code is this:
.image{
max-width: 50%;
}
.app{
display: flex;
}
.description{
color: red;
max-width: 705px;
}
<h1 class="title">My App</h1>
<div class="app">
<div class="image">image</div>
<div class="description">some long text</div>
</div> <!-- /.app -->
When I increase max-width of the image div, image div remains the same width no matter what.
But when I increase max-width of description, it changes accordingly.
Also when I change max-width to width it changes also the 460px and occupies more space than with max-width.
Why is this happening ?

Answer 1

max-width doesn't set the width of an element.
It tells your divs: this is how wide you can get (starting from 0, content width, or min-width)
Your divs have a max-width: 50% (.image) and max-width: 705px (.description).
If there were no content in either div, the width would be zero.
.app {
display: flex;
padding: 5px;
}
.image {
max-width: 50%;
border: 1px dashed black;
}
.description {
color: red;
max-width: 705px;
border: 1px dashed green;
}
<h1 class="title">My App</h1>
<div class="app">
<div class="image"></div>
<div class="description"></div>
</div>
<!-- /.app -->
If the content width were to be less than the max-width, the divs would take the content width.
.app {
display: flex;
padding: 5px;
border: 1px solid red;
}
.image {
max-width: 50%;
border: 1px dashed black;
}
.description {
color: red;
max-width: 705px;
border: 1px dashed green;
}
<h1 class="title">My App</h1>
<div class="app">
<div class="image">xxx</div>
<div class="description">xxxx</div>
</div>
<!-- /.app -->
If the content were to be more than the max-width, then max-width would come into play.
.app {
display: flex;
padding: 5px;
border: 1px solid red;
}
.image {
max-width: 10%;
border: 1px dashed black;
}
.description {
color: red;
max-width: 70px;
border: 1px dashed green;
}
<h1 class="title">My App</h1>
<div class="app">
<div class="image">image image image image image image image</div>
<div class="description">some long text some long text some long text some long text some long text</div>
</div>
<!-- /.app -->