I'm trying to create multiple child containers that contain an image and some text, with the container size adjusting based on the amount of text. The goal is for the image height to be 70% of the container's height, allowing the text to flow around it (in Desktop View Mode).
https://i.sstatic.net/8ZEf4.jpg
However, I'm encountering issues where the image does not resize itself and the inner container remains the same size regardless of the text length in the secondary and tertiary containers.
https://i.sstatic.net/3iLXM.jpg
The CSS I've implemented is as follows:
.OuterFlexContainer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
border-style: solid;
margin: 1px;
}
.InnerFlexContainer {
display:inline-flex;
align-items: center;
border-style: solid;
margin: 2px;
padding: 2px;
}
.InnerBlockContainer {
display:block;
margin: 2px;
padding: 2px;
}
.TextContainer {
display: block;
margin: 1em;
margin-inline-start: 1em;
margin-inline-end: 1em;
}
.image{
display: block;
float: left;
width: auto;
height: auto; /*Changing it to 70% makes the image disappear*/
margin: 1em;
}
The 'InnerBlockContainer' (Display:Block) is necessary in addition to the 'InnerFlexContainer' because 'Image:Float Left' does not function inside the Flex Container.
How can I ensure both 'InnerBlockContainer' and 'InnerFlexContainer' adjust according to the amount of text while also making sure that the image resizes itself to 70% of the container's size?
Below you will find the complete code snippet and JS Fiddle link:
.OuterFlexContainer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
border-style: solid;
margin: 1px;
}
.InnerFlexContainer {
display:inline-flex;
align-items: center;
border-style: solid;
margin: 2px;
padding: 2px;
}
.InnerBlockContainer {
display:block;
margin: 2px;
padding: 2px;
}
.TextContainer {
display: block;
margin: 1em;
margin-inline-start: 1em;
margin-inline-end: 1em;
}
.image{
display: block;
float: left;
width: auto;
height: auto; /*Changing it to 70% makes the image dissapear*/
margin: 1em;
}<div class="OuterFlexContainer">
<div class="InnerFlexContainer">
<div class="InnerBlockContainer">
<img class="image" src="https://cdn.pixabay.com/photo/2018/10/30/16/06/water-lily-3784022__340.jpg">
<div class="TextContainer">
<p>Matheran was identified by Hugh Poyntz Malet, the then district collector of Thane district in May 1850. Lord Elphinstone, the then Governor of Bombay laid the foundations of the development as a future hill station. The British developed Matheran as a resort to beat the summer heat in the region.</p>
<p>Matheran is the birthplace of freedom fighter Veer Bhai Kotwal. He was born on 1 December 1912 in a Barber family. The state government has built a monument in his memory. The Matheran Hill Railway was built in 1907 by Sir Adamjee Peerbhoy and covers a distance of 20 km (12 mi), over large swathes of forest territory.</p>
<p>The Matheran hill railway, also known as Matheran Light Railway (MLR), was inspected by UNESCO world heritage site officials but failed to make it to the list as a World Heritage Site. India's other Hill Railways like the Darjeeling Railway, the Kangra Valley Railway, Nilgiri Mountain Railway are already on the list.</p>
</div>
</div>
</div>
</div>JS Fiddle: https://jsfiddle.net/mithunu/4d1c2L0b/