flex-wrap:wrap; On the container
flex:1 0 150px; On the text, This translates to
flex-grow:1; // grow to fill remaining space
flex-shrink:0; // don't ever shrink
flex-basis:150px; // have a minimum width of 150px
- The text should stay in it’s column but wrap or expand in it’s column changes width
flex-grow:1; will make the text expand to fill the remaining space in it’s column and wrap if the column changes width.
- when the right column is under 150px I’d like the text to drop below the image
Since the text have a minimum width of 150px we know that it needs at least 150px to stay next to the image if there’s isn’t enough space it will drop below the image thanks to flex-wrap:wrap; on the parent.
- and use 100% of the outer container
Again flex-grow:1; will make the text grow to fill the remaining space.
.container {
background-color: yellow;
max-width: 300px;
display: flex;
flex-wrap: wrap;
}
.container>div {
flex: 1 0 150px;
}
/* Not needed */
.container {
margin: 10px auto;
overflow: auto;
resize: horizontal;
}
p {
display: table;
margin: auto;
}<div class="container">
<img src="https://via.placeholder.com/100">
<div>this is some text text text this is some text text text this is some text text text</div>
</div>
<p>The text column isn't below 150px so it stays</p>
<div class="container">
<img src="https://via.placeholder.com/150">
<div>this is some text text text this is some text text text this is some text text text</div>
</div>
<p>text column is below 150px so it drops below the img</p>
<div class="container">
<img src="https://via.placeholder.com/250">
<div>this is some text text text this is some text text text this is some text text text</div>
</div>
