max-width doesn't determine the width of an element.
Instead, it instructs your divs: this is the maximum width you are allowed to expand to (starting from 0, content width, or min-width)
For example, your divs have a max-width: 50% (.image) and max-width: 705px (.description).
If there is no content within 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 is less than the max-width, the divs will adjust to fit 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 exceeds the max-width, then the max-width rule will take effect.
.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 -->