Question 200843 in CSS Question posted in
Some basic documentation can be found here.

Css – <Main /> component should show horizontal scroll. But doesn't

https://codesandbox.io/s/sweet-browser-kgzg3q?file=/src/App.js

I want the <Main /> component to have at least width 1000px and if it doesn’t, want a scroll-x to appear. But it doesn’t.

Any clue here? Help me css ninja!

Tags:

2

Answers


  1. 0

    Correct me if I’m wrong, but it appears that the width properties of both the grid element and each direct child is overwritten by the grid-template-columns property. Therefore you need to create a child inside the Main component that sets the min-width and scroll properties there. I forked your code and have written an example. I believe this is what you are looking for.

    const Layout = () => {
  return (
    <Wrapper>
      <LeftIconBar style={{ height: "100%", overflow: "scroll" }}>
        <LargeText>hello world</LargeText>
      </LeftIconBar>
      <Sidebar style={{ height: "100%", overflow: "scroll" }}>
        <LargeText>hello world</LargeText>
        ...
      </Sidebar>
      <Main>
        <MainContent>
          <LargeText>last text</LargeText>
          ...
        </MainContent>
      </Main>
    </Wrapper>
  );
};

const MainContent = styled.div`
  min-width: 1000px;
  height: 100%;
`;

const Main = styled.div`
  background-color: yellow;
  height: 100%;
  overflow: scroll;
`;

const Wrapper = styled.div`
  background-color: pink;
  height: 100%;
  display: grid;
  grid-template-columns: 60px 500px 1fr;
`;

...
    Login or Signup to reply.
  2. 0

    You have the following structure:

    <Main>
  <LargeText>last text</LargeText>
</Main>

    The problem is that <LargeText> needs to overflow the <Main> in order for horziontal scrollbar to appear.

    Change this…

    const LargeText = styled.div`
  font-size: 100px;
  width: 100%;
  word-wrap: break-word;
`;

    …to this.

    const LargeText = styled.div`
  font-size: 100px;
  min-width: 1200px; /* Adjust the value */
  width: 100%;
  word-wrap: break-word;
`;

    See the forked snippet.

    App.js

    import "./styles.css";
import styled from "@emotion/styled";
import { Global, css } from "@emotion/react";
import emotionReset from "emotion-reset";

export default function App() {
  return (
    <>
      <Global
        styles={css`
          ${emotionReset}
          html, body, #root {
            height: 100%;
            overflow: hidden;
          }
        `}
      />
      <Layout />
    </>
  );
}

const Layout = () => {
  return (
    <Wrapper>
      <LeftIconBar style={{ height: "100%", overflow: "scroll" }}>
        <LargeText>hello world</LargeText>
      </LeftIconBar>
      <Sidebar style={{ height: "100%", overflow: "scroll" }}>
        <LargeText>hello world</LargeText>
        <LargeText>hello world</LargeText>
        <LargeText>hello world</LargeText>
        <LargeText>hello world</LargeText>
        <LargeText>hello world</LargeText>
        <LargeText>last text</LargeText>
      </Sidebar>
      <Main>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
        <LargeText>last text</LargeText>
      </Main>
    </Wrapper>
  );
};

const Main = styled.div`
  background-color: yellow;
  min-width: 1000px;
  width: 100%;
  overflow: scroll;
  height: 100%;
`;

const LargeText = styled.div`
  font-size: 100px;
  min-width: 1200px; /* Adjust the value */
  width: 100%;
  word-wrap: break-word;
`;

const LeftIconBar = styled.div`
  background: blue;
`;

const Sidebar = styled.div`
  background-color: red;
`;

const Wrapper = styled.div`
  background-color: pink;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 60px 500px minmax(1000px, 1fr);
`;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search