Flexbox -how to get first child 50% widht and 100% height while stacking remaining children?

Question

I can't do much with the markup, if I could I'd just add 2 containers side by side. Basically it is a UL that looks like this:

<ul>
   <li>one</li>
   <li>two</li>
   <li>three</li>
   <li>four</li>
</ul>

I need the first child to fill the height of the container at 50% width. The remaining children should have 50% width but auto height and stack on the right side of the container.

Answer 1

Use flex-direction: column with flex-wrap: wrap, and then size/flex on the list items:

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vh;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  background: red;
  margin: 1%;
}

li:first-child {
  height: 100%;
}

li:not(:first-child) {
  flex: 1;
}

body {
  margin: 0;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>

Answer 2

For infos display:table/table-cell aside display:block can help too here without setting an height :

example

ul {
  display: table;
  /* make it behave as a regular block */
  table-layout:fixed;
  width:100%;
  /* - */
  margin:0.5em 0;
  padding: 0;
  list-style: none;
  border-spacing:0.5em;
  border:solid;
  box-sizing:border-box;
  background:lightgreen
}

li {
  background:tomato;
  padding:0.5em;
}

li:first-child {
 display:table-cell;
}

li:nth-child(2)~li {
  margin-top:0.5em;
}

body {
  margin: 0;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>fourth<br> 'n bit higher</li>
  <li>Five</li>
</ul>

but grid would do better ... what matters is the final use and the browsers where it needs to be working fine.