flexbox реагирует: не меняет размер

Question

Я пытаюсь отобразить на экране зеленый блок для 1/4 экрана и желтый блок для 3/4 экрана с помощью activ.js У меня есть следующий код - но зеленый блок и желтый блок имеют одинаковый размер.

MyComp.js:

import React from 'react';
import './MyComp.css'

export default class MyComp extends React.Component {
  render() {
    return (
      <div className="wrapp">
        <div className="greenBlock">
          <h1>green </h1>
        </div>
        <div className="yellowBlock">
          <h1>yellow </h1>
        </div>
      </div>
    );
  }
}

MyComp.css:

.wrapp,
html,
body {
  height: 100%;
  margin: 0;
}

.wrapp {
  display: flex;
  flex-direction: column;
}

.greenBlock {
  background-color: green;
  flex: 0.25
}

.yellowBlock {
  background-color: yellow;
  flex: 0.75
}
```

Answer 1

Я не думаю, что вы можете использовать значения с плавающей запятой в свойстве flex.

Вот инструкция для использования flex-box

Вы должны сделатькак то так:

.container{
  width: 100%;
  height: 100px;
  display:flex;
}

.a{
  flex: 3;
  background-color: red;
}

.b{
  flex: 1;
  background-color: green;
}


.container-vertical{
  width: 100%;
  height: 100px;
  display:flex;
  flex-direction: column
}

<div class="container">
   <div class="a"></div>
   <div class="b"></div>   
</div>
<br /> <br />
<div class="container-vertical">
   <div class="a"></div>
   <div class="b"></div>   
</div>

Answer 2

Вы можете использовать свойство flex flex и назначать числа в целых числах, или вы также можете использовать свойство flex-basis, где вы также можете указать желаемое соотношение в%.

.container{
  display:flex;
  flex-flow: row nowrap;
  height: 200px;
}

.red{
  flex-basis: 66.66666%;
  background-color: red;

}

.green{
  flex-basis: 33.33333%;

  background-color: green;
}

/* OR */



.y{
 flex: 2;
 background-color: yellow;
}

.b{
 flex: 1;
 background-color: blue;
}

<div class="container">
   <div class="red"></div>
   <div class="green"></div>   
</div>
<br/>

<div class="container">
   <div class="y"></div>
   <div class="b"></div>   
</div>