Nivo响应线图只响应变宽，不响应变窄

Question

我试图用nivo制作一个响应线图。

我用这个MWE重现了我的尝试：

import React, { useState, useEffect } from "react";
import { ResponsiveLine } from "@nivo/line";
import styled from "styled-components";

const HoursGraphWrapper = styled.div`
  display: grid;
  grid-template-rows: 300px;
  grid-template-columns: 1fr;
  grid-gap: 10px;
`;

const useWindowWidth = () => {
  let width, setWidth;
  if (typeof window !== "undefined") {
    [width, setWidth] = useState(window.innerWidth);
  } else {
    [width, setWidth] = useState(1001);
  }

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  });

  return width;
};

const TestGraph = () => {
  const width = useWindowWidth();

  return (
    <HoursGraphWrapper>
      <ResponsiveLine
        data={[
          {
            id: "A",
            data: [
              { x: "2019-01-11", y: 11 },
              { x: "2019-01-12", y: 20 },
              { x: "2019-01-13", y: 24 },
              { x: "2019-01-14", y: 25 },
              { x: "2019-01-15", y: 15 },
              { x: "2019-01-16", y: 50 },
              { x: "2019-01-17", y: 30 },
              { x: "2019-01-18", y: 31 }
            ]
          },
          {
            id: "B",
            data: [
              { x: "2019-01-11", y: 30 },
              { x: "2019-01-12", y: 24 },
              { x: "2019-01-13", y: 22 },
              { x: "2019-01-14", y: 15 },
              { x: "2019-01-15", y: 35 },
              { x: "2019-01-16", y: 45 },
              { x: "2019-01-17", y: 20 },
              { x: "2019-01-18", y: 11 }
            ]
          }
        ]}
        colors={{ scheme: "set1" }}
        xScale={{
          type: "time",
          format: "%Y-%m-%d",
          precision: "day"
        }}
        xFormat="time:%Y-%m-%d"
        yScale={{
          type: "linear",
          stacked: false
        }}
        axisLeft={{
          format: value => `${value}hr`,
          legend: "Total Hours",
          legendOffset: -50,
          legendPosition: "middle"
        }}
        axisBottom={{
          format: "%b %d",
          legend: "Date",
          legendOffset: 36,
          legendPosition: "middle",
          tickValues: width < 1000 ? 5 : undefined
        }}
        curve="monotoneX"
        enablePoints={width > 1000}
        pointBorderWidth={1}
        useMesh={true}
        enableSlices={false}
        margin={{ top: 10, right: 20, bottom: 60, left: 80 }}
        animate={true}
      />
    </HoursGraphWrapper>
  );
};

export default TestGraph;

如果我让浏览器更宽，线条图会像你期望的那样响应，填满空间。

我的问题是，如果我使浏览器变窄，图形不会像我使其变宽时那样调整大小以填充浏览器宽度的100%。对于新的浏览器宽度来说，它仍然太宽。有趣的是，在刷新时，图形总是占据浏览器的100%。

把浏览器做宽做窄，如何让图占据浏览器的100%？

Answer 1

我已经解决了这个问题，因为这个问题和答案是这样的：当窗口变小时，弹性物品不会缩小

解决方案是添加一个div包装器周围的响应线图形具有以下样式：

最小宽度：0