Div in React doesn't get the maximum size

Asked
Active3 hr before
Viewed126 times

6 Answers

doesnreact
90%

Meta Stack Overflow , Stack Overflow help chat , Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers

Your container class is adding a

max - width: 960 px
load more v
88%

A natural solution to this is to simply poll for size and position changes.,Embrace the fact that size and position will change. Don’t get them once in componentDidMount and expect them to be accurate.,Store the element’s size and position on your state. Then check for changes via ResizeObserver or polling depending on your needs.

function RectangleComponent() {
  return (
    <div
      ref={el => {
        // el can be null - see https://reactjs.org/docs/refs-and-the-dom.html#caveats-with-callback-refs
        if (!el) return;

        console.log(el.getBoundingClientRect().width); // prints 200px
      }}
      style={{
        display: "inline-block",
        width: "200px",
        height: "100px",
        background: blue
      }}
    />
  );
}
load more v
72%

To specify a CSS class, use the className attribute. This applies to all regular DOM and SVG elements like <div>, <a>, and others.,There are a number of attributes that work differently between React and HTML:,As of React 16, any standard or custom DOM attributes are fully supported.

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}
load more v
65%

Note: The CSS Sizing specification also defines the fit-content() function. This page details the keyword., Box model Introduction to the CSS basic box model Mastering margin collapsing , Lists and counters Using CSS counters Consistent list indentation

width: fit - content
block - size: fit - content
load more v
75%

A component's height and width determine its size on the screen.,Core Components and Native Components,After you can control a component's size, the next step is to learn how to lay it out on the screen.

Pretag
 Pretag team - issue, fix, solve, resolve
40%

npm i react-responsive,The best supported, easiest to use react media query module.,github.com/contra/react-responsive

$ npm install react - responsive--save
load more v

Other "doesn-react" queries related to "Div in React doesn't get the maximum size"