HTML CSS flexbox image and text

Question

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

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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>

HTML CSS flexbox image and text

Sign up