Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make buttons 100% when text pushes it below image

Tags:

html

css

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. enter image description here

This is the desired result when the text grows enter image description here

Is this possible to do with CSS only?

I've created a codepen for my current setup (only small text). http://bit.ly/1TwajIf

like image 200
NLAnaconda Avatar asked Feb 23 '16 02:02

NLAnaconda


1 Answers

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;

}

enter image description here

check the demo for full detail

like image 162
Louie Almeda Avatar answered Oct 20 '22 20:10

Louie Almeda