I'm currently experimenting with flex-grow and media queries to create a responsive website design. However, I've encountered an issue where instead of text wrapping as expected, it's resizing the containing divs and causing alignment problems. Can anyone provide insight into why this might be happening?
I suspect that the problem may be related to my use of flex-grow. I've attempted to set minimum and maximum widths, as well as different word wrapping properties, but haven't been successful in resolving the issue.
Below is the code snippet:
jsFiddle
<div id="container">
<div id="title">
<h1>Title</h1>
</div>
<div class="work" id="motion">
<h2>Sub</h2>
</div>
<div class="work" id="print">
<h2>Sub</h2>
</div>
<div class="work" id="interaction">
<h2>Sub</h2>
</div>
</div>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
font-family: sans-serif;
font-weight: normal;
max-width: 100%;
}
#container h1,
h2 {
padding: 1rem;
}
#container {
height: 100%;
display: flex;
flex-direction: row;
}
#title {
background-color: red;
flex-grow: 2;
margin: 1em;
min-height: 15em;
}
.work {
margin: 1em;
flex-grow: 1;
background-color: gray;
min-width: 4em;
}
#motion,
#print,
#title {
margin-right: 0;
margin-bottom: 1em;
}
#interaction {}
@media only screen and (max-width: 1020px) {
body {
background-color: blue;
}
#container {
flex-direction: column;
flex-wrap: wrap;
height: 100%;
}
#motion,
#print {
margin-right: 1em;
margin-bottom: 0;
}
.work {
min-height: 10em;
}
#title {
height: 100%;
}
}
@media only screen and (max-width: 600px) {
body {
background-color: yellow;
}
#motion,
#print,
#title {
margin-right: 1em;
margin-bottom: 0;
}
#container {
flex-wrap: nowrap;
}
}