Как мне смешать ширину и процент (левый / правый) в гибком макете?

Question

У меня есть 3 блока, которые мне нужны:

• Первый блок должен иметь ширину 200 пикселей и касаться левой стороны.
• Второй блок расположен сразу после первогоблок и его правый край находятся точно на 50% ширины его контейнера
• Третий блок просто занимает все оставшееся пространство.

Я сделал нечто похожее в некотором игровом движке:

Но как мне добиться этого с помощью css?

Я не хочу вкладывать внутренние элементы div, потому что они играют одну и ту же роль.

---

Я пробовал это, но это не работает: (

* {
  box-sizing: border-box;
}

.wrapper {
  width: 100%;
  display: flex;
  position: relative;
}

.wrapper > * {
  height: 300px;
  display block;
}

.wrapper > *:nth-child(1) {
  background-color: salmon;
  width: 200px;
}

.wrapper > *:nth-child(2) {
  background-color: khaki;
  right: 50%;
}

.wrapper > *:nth-child(3) {
  background-color: violet;
  width: 50%;
}

  
    left: 0;
    width: 200px;
  

    left: 200px;
    right: 50%;
  

    left: 50%;
    right: 0;
  

Answer 1

Вы можете установить flex: 0 0 50% на третий дочерний элемент , что означает, что элемент не будет расти, уменьшаться и всегда будет занимать половину ширины контейнера flexbox.

Теперь, чтобы позволить второму дочернему элементу занимать оставшееся пространство, оставшееся от двух других элементов, вы можете установить flex-grow: 1 и установить min-width: 0 (позволяет уменьшаться дальше, чем его собственная ширина - обратите внимание, что по умолчаниюmin-width является автоматическим для гибкого элемента ).

См. Демонстрацию ниже:

* {
  box-sizing: border-box;
}

.wrapper {
  width: 100%;
  display: flex;
  position: relative;
}

.wrapper > * {
  height: 300px;
  display: block;
}

.wrapper > *:nth-child(1) {
  background-color: salmon;
  width: 200px;
}

.wrapper > *:nth-child(2) {
  background-color: khaki;
  flex-grow: 1; /* grow width automatically if needed */
  min-width: 0; /* allow shrinking below default width */
}

.wrapper > *:nth-child(3) {
  background-color: violet;
  flex: 0 0 50%; /* added */
}

  
    left: 0;
    width: 200px;
  

    left: 200px;
    right: 50%;
  

    left: 50%;
    right: 0;
  

Answer 2

Попробуйте это

    * {
      box-sizing: border-box;
    }

   body{
      display: flex;
      flex-direction: row;
   }

    .wrapper, .wrapper-1 {
      width: 50%;
      display: flex;
      position: relative;
    }

    .wrapper > *, .wrapper-1 > * {
      height: 300px;
      margin: 0;
      display: inline;
      white-space: nowrap;
    }

    .wrapper > *:nth-child(1) {
      background-color: salmon;
      flex-basis: 200px;
    }

    .wrapper-1 > *:nth-child(1) {
      background-color: violet;
      flex: 1 1 auto;
    }

    .wrapper > *:nth-child(2) {
      background-color: khaki;
      flex: 1 1 auto;
    }

    .wrapper > *:nth-child(3) {
      background-color: violet;
     flex: 1 auto;
    }

 flex-basis: 200px;
  

 flex: 1 1 auto;
  

flex: 1 1 auto;