darkchampionz darkchampionz - 3 years ago 190
CSS Question

HTML CSS flexbox image and text

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

Answer Source

You can do this either with a media query, or like here, using a min-width.

When combined with flex-grow, it will take full width when they wrap, and the flex-basis will make them share the width when not.

For best cross browser support, I also wrapped the img

Fiddle demo

Stack snippet

.outer {
  background-color: gray;
  display: flex;
  flex-wrap: wrap;
}
.outer .img {
  flex-grow: 1;
  flex-basis: calc(50% - 20px);
  margin: 10px;
  min-width: 300px;
}
.img img {
  display: block;
  max-width: 100%;
}
.txt {
  flex-grow: 1;
  flex-basis: calc(50% - 22px);    /*  22px = 2*10px margin + 2*1px border  */
  border: 1px solid yellow;
  margin: 10px;
  min-width: 300px;
}
<div class="outer">
  <div class="img">
    <img src="http://treepicturesonline.com/ebonytreesunset.jpg">
  </div>
  <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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download