I use a flexbox to display a div
with an image
on the left side and a text
on the right side. I want the image
to resize only towards the x-axis and not y but keep its ratio. For the text
div I want as soon as it resizes a lot in x-axis to be displayed below the image
. I use:
<html>
<head>
<style>
.outer {
background-color: gray;
display: flex;
padding: 10px;
flex-wrap: wrap;
}
.img {
max-height: 468px;
max-width: 100%;
margin-right: 10px;
}
.txt {
border: 1px solid yellow;
}
</style>
</head>
<body>
<div class="outer">
<img class="img" src="http://treepicturesonline.com/ebonytreesunset.jpg">
<div class="txt">
In botany, a tree is a perennial plant with an elongated stem, or trunk, supporting branches and leaves in most species. In some usages, the definition of a tree may be narrower, including only woody plants with secondary growth, plants that are usable as lumber or plants above a specified height. Trees are not a taxonomic group but include a variety of plant species that have independently evolved a woody trunk and branches as a way to tower above other plants to compete for sunlight. Trees tend to be long-lived, some reaching several thousand years old. In looser definitions, the taller palms, tree ferns, bananas and bamboos are also trees. Trees have been in existence for 370 million years. It is estimated that there are just over 3 trillion mature trees in the world.[1]
</div>
</div>
</body>
</html>
Now, this partially works. If I replace this wall of text with a small one like Test
then it is displayed on the right side and if resized a lot it goes bottom as wanted but with this one it goes directly bottom... Then the image does resize only towards x but does not keep its ratio... How can I fix both of these issues?
Thanks