Я пытаюсь использовать React и flexbox. Обычно я могу использовать flexbox для реагирования на родной, но icouldnt в react.js

Это мой файл css

.wrapper, html, body {
    height:100%;
    margin:0;
    position:absolute;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
.nav {
    background-color: red;
    flex:1
}
.main {
    background-color: blue;
    flex:1
}

Это мой файл js

import React, { Component } from 'react';
import './background.css';
import { Icon } from 'semantic-ui-react'
import Navbar from './navbar'

class Back extends Component {



  render() {
    return (
      <div className="wrapper">
          <div className="nav"></div>
          <div className="main"></div>
       </div>
    );
  }
}

export default Back;

У меня просто белый экран в чем может быть проблема?

Спасибо

3
tech snake 30 Июн 2017 в 14:05
В ваших div nav и main нет содержимого! codeandbox.io/s/9QPvrw3pY
 – 
glhrmv
30 Июн 2017 в 14:10
Просмотрите и прокомментируйте мой ответ и дайте мне знать, если что-то неясно или отсутствует. Если нет, то было бы здорово, если бы вы приняли ответ. Кроме того, принятие ответов - отличный способ мотивировать пользователей давать полезные ответы на ваши будущие вопросы, и это увеличивает количество ваших представителей.
 – 
Asons
1 Июл 2017 в 22:33

2 ответа

Лучший ответ

Поскольку wrapper позиционируется абсолютно и не имеет содержимого для роста, его ширина уменьшается до 0.

Так что просто удалите position: absolute из правила .wrapper, html, body.

Если вы все еще хотите использовать position: absolute, вам также нужно указать ширину оболочки.

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

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

.nav {
  background-color: red;
  flex: 1
}

.main {
  background-color: blue;
  flex: 1
}
<div class="wrapper">
  <div class="nav"></div>
  <div class="main"></div>
</div>
7
Asons 30 Июн 2017 в 14:57
Он работает с обычным HTML и Css, но я не могу получить тот же результат при реакции? любая идея ?
 – 
tech snake
2 Июл 2017 в 11:21
Если вы используете dev. инструменты, встроенные в браузеры (щелкните правой кнопкой мыши на веб-странице и выберите Inspect ), вы можете затем просмотреть визуализированные элементы и просмотреть стили, которые у них есть. Если у вас есть ссылка или скрипка на этот образец, я могу очень быстро проверить это и понять, почему он не работает.
 – 
Asons
2 Июл 2017 в 11:40

Вы также можете использовать float: left в классе-оболочке.

0
UTTAM VISHVAKARMA 22 Апр 2021 в 21:41