Creating two elements with vw to create 100vw doesn't work

Question

I'm trying to create 2 simple divs, one of 80vw and the other of 20vw to create two divs side by side.

For some reason this doesn't work:

<div style="background:black; height:100vh; width:50vw; display:inline-block;">50vw</div>
<div style="background:red; height:100vh; width:50vw;display:inline-block;">50vw</div>

Fiddle: https://jsfiddle.net/4hvrz4o1/

bishop · Answer 1 · 2017-08-18T14:29:59.140

-1

Switch to flexbox model:

 <div style="display:flex">
     <div style="background:black; height:100vh; width:50vw; display:inline-block;">50vw</div>
     <div style="background:red; height:100vh; width:50vw;display:inline-block;">50vw</div>
 </div>

The original browser layout madness has a method to it, you just have to remember it. Personally, I find the the flexbox model more often aligns with my "way of thinking" about layout, so I use it more often. Here's a cheat sheet to common use cases, esp. the side-by-side case.

edited Aug 18 '17 at 14:29

answered Aug 18 '17 at 14:26

bishop

37,830
11
104
139

Ok but why mine doesn't work? It should work just fine without the container shouldn't it? – Nir Tzezana Aug 18 '17 at 14:29
No, because the parent of those two `div` -- `` -- has not been sized to _envelope_ them. In the traditional box layout model, you have to carefully ensure the parent always envelopes its children. Flex box still requires a parent that envelopes the children, but it handles more of the calculation for you. You might also consider [CSS Grid](https://tutorialzine.com/2017/03/css-grid-vs-flexbox) if this is going to be a full-page layout. – bishop Aug 18 '17 at 14:38

score -2 · Answer 2 · answered Aug 18 '17 at 14:25

-2

Add a parent element with width:100vw and child element as width:50%

Here is updated fiddle : https://jsfiddle.net/4hvrz4o1/2/

answered Aug 18 '17 at 14:25

MJN

610
1
7
19

Creating two elements with vw to create 100vw doesn't work

2 Answers2