CODEWITHSUNDEEP
csswordpressflexbox
sean
sean

Reputation: 119

CSS Display Flex. I cant get it to work

Okay I have 3 divs The outside div is a column. All 3 div heights are dynamically generated by its contents.

<div class="outer" style="display:flex; flex-direction:column; float:left;">
   <div class="text 1" style="float:left; flex:1; background:red;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna. Nulla facilisi. Nulla gravida congue viverra. Vivamus maximus lacus dolor, sit amet vestibulum orci maximus tristique. Nam non metus nisl. Mauris gravida magna sed dolor venenatis malesuada. Sed in rutrum erat. Sed dictum est neque, sit amet consequat dolor dictum eget. Fusce sit amet dolor orci. Curabitur tempus vel erat ac dictum. Proin vel congue velit. Nam venenatis erat neque, at convallis mauris eleifend ultrices. In hac habitasse platea dictumst</p></div>
   <div class="text 2" style="float:left; flex:1; background:blue;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna.</p></div>
</div>

I have applied inline CSS for display Flex. Im working in Firefox, however I do have the cross browser CSS, but im just focused on getting it working here in Firefox and understanding this first.

The goal of what im trying to accomplish here is to make text 2 the exact same height as text 1.

Im new to this whole flex thing, im fairly certain im doing this completely wrong, ive been reading articles for a few hours and everything I try doesnt work. So im assuming im understanding this all wrong.

Im not sure if it matters, but this is being done within wordpress. Also everything is floating left

I apologize if this is trivial but im at a loss, and Stackoverflow never fails me. Any help would be greatly appreciated.

Upvotes: 1

Views: 893

Answers (1)

Nico O
Nico O

Reputation: 14152

You are not far from what you wanted to do. Please notice that I removed the white spaces from your class names as white spaces are the separator for multiple classes. .1 and .2 are invalid class names.

You should use flex-direction: row; as you want the layout to be horizontally arranged. I used the flex shorthand property to reach the desired result, which stand for flex-grow, flex-shrink and flex-basis. 

.outer
{
  display: flex;
  flex-wrap: row nowrap;
}

.text1, .text2
{
  flex: 1 0;
}

.text1
{
  background-color: gray;
}

.text2
{
  background-color: darkgray;
}
<div class="outer">
   <div class="text1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna. Nulla facilisi. Nulla gravida congue viverra. Vivamus maximus lacus dolor, sit amet vestibulum orci maximus tristique. Nam non metus nisl. Mauris gravida magna sed dolor venenatis malesuada. Sed in rutrum erat. Sed dictum est neque, sit amet consequat dolor dictum eget. Fusce sit amet dolor orci. Curabitur tempus vel erat ac dictum. Proin vel congue velit. Nam venenatis erat neque, at convallis mauris eleifend ultrices. In hac habitasse platea dictumst</p></div>
   <div class="text2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna.</p></div>
</div>

Also it is not necessary to use float on flex elements. But it should have no effect what so ever, as of the w3c:

float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.

Upvotes: 2

Related Questions