1

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.

splash
  • 13,037
  • 1
  • 44
  • 67
sean
  • 119
  • 5
  • 13

1 Answers1

2

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.

Nico O
  • 13,762
  • 9
  • 54
  • 69
  • First, thanks for the speedy response. Your awesome. Okay... interesting stuff. So flex-wrap was invalid. Changed to flex-flow, that works, browser helped me there. When I do row, your spot on, it works. However it stacks them side by side. I actually do need them stacked one on top of the other. Can this be done? if I change it to column it doesnt work. – sean Apr 27 '16 at 07:11
  • I think I misunderstood your question. If you wanted to stack two equal height containers above each other, your try of using `flex-direction: column` was correct and my solution was bad. I'am afraid though, that this is indeed one of the things flex can't help you with (afaik). – Nico O Apr 27 '16 at 07:16
  • Im marking this correct seeing as we pushed the limit then. Would you suggest the JS route then? I wanted to stay in CSS, sigh. Also I saw the "take it out-of-flow" out of curiosity and for my understanding. Flex then will not work with position absolute? – sean Apr 27 '16 at 07:25
  • You can close your question- but I don't think my answer was correct. JS is definitely a possible way. But this strongly depends on the individual use case. Maybe it is possible to archive what you want with CSS only. But you should present a more complex demo, showing your actual problem. By that i mean, that we'd need to see some layers above this snippet. – Nico O Apr 27 '16 at 07:27