попробуйте обернуть во врапер, враперу задать основные ширины, а внутреннему диву дисплей-инлайн блок

Я так уже пробовал - не выходит. Естественно, если я пишу отличное и удобное свойство width: max-content, все работает как часы (сейчас в ссылке на кодпен именно так), но мне этот вариант не подходит, так как бизнес не хочет работать без верстки под говнобраузеры.
https://codepen.io/dizox/pen/QWbwyrz?editors=1100

Вёрстку во флудилку

Так задайте бг-колор и падинги дочерним блокам, а враперу сделайте дисплей флекс и флекс-дайрекшен колум

ок

У меня такой вопрос, странный, возможно. Я изучаю реакт уже пару месяцев и пока ещё не понял - почему многие пишут, например, так:

class Cat extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      humor: 'happy'
    }
  }
  render() {
    return(
      <div>
        <h1>{this.props.name}</h1>
        <p>
          {this.props.color}
        </p>
      </div>
    );
  }
}

А не, например, в таком стиле (без constructor, this.state и прочего):
https://github.com/Dizox/Chat/blob/master/front/src/Chat/components/MessagesList/MessagesList.jsx

Второй код я писал сам (да, он очень плох, но я старался) и когда часто гуглю как и что решать, встречаюсь с первым вариантом оформления и вообще не вдупляю, что там происходит. Какой из двух вариантов кода написан в более устаревшем стиле?

Можно ли как-нибудь подгрузить глобальную переменную с другого сайта?

class Cat extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      humor: 'happy'
    }
  }
  render() {
    return(
      <div>
        <h1>{this.props.name}</h1>
        <p>
          {this.props.color}
        </p>
      </div>
    );
  }
}

Классовые компоненты были с самого начала реакта, те что у тебя по ссылке называются функциональные с использование HOOKS появились относительно недавно

То есть, мой вариант написания кода более современный? Просто, первый вариант для меня совершенно не читаем и не знаю, если ли смысл пытаться осознать что там происходит. (ну, не тот элементарный с кошкой, а где куча наследований, зависимостей и прочей мути - как на типичном реакт проекте)

Лучше начать с классов, а потом перейти на функциональные компоненты(мой опыт)
Потом сам разберешься что к чему

Согалсен, так как кучу всего написно на клаасах и нужно понимать что к чему

Конечно нужно разбираться, как минимум потому, что хуки не заменяют кассовые компоненты в 100 процентах случаев. Ну и много кода уже написано на кассовых компонентах

Заменяют во всех кейсах кроме дидКэтч

То есть всякие componentWillMount, componentWillUpdate и тд не смущают?

А ты пользуешься темы методами которые уже давным давно деприкейтыд?

Речь не о том, депрекейтед это или нет, а о заменимости хуками

Они юзлес, разве этого недостаточно?

Ваш вариант основан на свежих версиях Реакта.
Код на классах проще для понимания для многих новичков, по моей личной статистике.
Код на функциях удобный и лаконичный, но требует высокой степени погружения в функциональное программирование.
Для вас удобнее функции? Начинайте сразу с них, за ними будущее Реакта.

Да, мне гораздо удобнее именно функции. Начинал учить реакт раза 3 за год и пока не начал учить именно, так называемый, новый реакт - понимать что-то было максимально затруднительно. Спасибо за ответы)

Всем привет, у меня вопрос по Git, в командной строке и сервисе github можно одни и те же функции выполнять?