This is a complicated one and I don't even know if it is possible with CSS only.
I have an image, a piece of text and two buttons. When the text is small, and doesnt grow below the image, I want the buttons to be the next to the image. But when the text is so large it needs to continue below the image I want the buttons to grow to 100% width. Long story short, I want the buttons to be the same size as the text.
This is the desired result for small text.
This is the desired result when the text grows
Is this possible to do with CSS only?
I've created a codepen for my current setup (only small text). http://bit.ly/1TwajIf
DEMO (try changing the height of the .img or the width of the output)
Great question! this is actually possible using only css.
I made the image float: left
then use flex box for the container of the buttons like
.fill{
outline: 1px solid red;
display: flex;
}
.fill>*{
flex-grow: 1;
}
check the demo for full detail
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With