I'm trying to do this :
The flex-item img must define the flex-container width and the other flex-item (the div with "a" and "aaaaaaa...") must into the flex-container but must not make the flex-container grow.
Also, i don't want to fix a width of text flex-item in px because the image width is dynamic. How can i do that without using javascript ?
I made this code snippet according to my image to help :
.flex-container {
display: flex;
flex-direction: column;
border: 3px blue solid;
}
.random-image {
width: 50px;
height: 50px;
border: 3px red solid;
}
.first-text, .second-text {
border: 3px orange solid;
}
.second-text {
word-break: break-all;
}
<div >
<div ></div>
<div >a</div>
<div >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>
CodePudding user response:
Remove the fixed width on the image div
and use width: min-content;
on the flex-container
as well as the random-image
div. This should work nicely for you.
.flex-container {
display: flex;
flex-direction: column;
border: 3px blue solid;
width: min-content;
height: fit-content;
padding: 10px;
}
.random-image {
border: 3px red solid;
width: fit-content;
}
.first-text, .second-text {
border: 3px orange solid;
}
.second-text {
word-break: break-all;
}
.first-text {
width: fit-content;
margin: 1em auto 1em auto;
}
<div >
<div ><img src="https://dummyimage.com/600x400/000/fff"></div>
<div >a</div>
<div >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>