justify content space between wont show a div-CodePudding

I'm learning React by coding, here i have two different images and under those should be div with 20px height and brown background color, and as you can see i have put height :"100%" and justifyContent: "space-between" so now i should be able to see that div under images, why it isnt showing ?

ttry it here: https://codesandbox.io/s/amazing-http-6bdt88?file=/src/App.js

code:

import React from "react";
import { Allotment } from "allotment";
import "./styles.css";
import "allotment/dist/style.css";

export default function App() {
  return (
    <div className="App">
      <div style={{ background: "blue", minHeight: "42px" }}>Monitor</div>
      <div style={{ display: "flex", height: "100%", background: "darkblue" }}>
        <div
          style={{
            border: "1px solid orange",
            width: "100px",
            height: "100%",
            background: "gray"
          }}
        >
          side content
        </div>
        <div style={{ width: "100%", height: "100%" }}>
          <div
            style={{
              width: "100%",
              height: "100%",
              background: "red",
              border: "3px solid yellow"
            }}
          >
            <Allotment>
              <Allotment.Pane>
                <div style={{ height: "40px", background: "brown" }}></div>
                <div
                  style={{
                    display: "flex",
                    height: "100%",
                    flexDirection: "column",
                    justifyContent: "space-between"
                  }}
                >
                  <div>
                    <img
                      style={{ width: "100%", height: "auto" }}
                      src={require("./the-mandalorian.jpg")}
                      alt="cat"
                    />
                  </div>
                  <div style={{ height: "20px", background: "brown" }}></div>
                </div>
              </Allotment.Pane>
              <Allotment.Pane>
                <div style={{ height: "40px", background: "brown" }}></div>
                <div
                  style={{
                    display: "flex",
                    height: "100%",
                    flexDirection: "column",
                    justifyContent: "space-between"
                  }}
                >
                  <div>
                    <img
                      style={{ width: "100%", height: "auto" }}
                      src={require("./nature.jpg")}
                      alt="cat"
                    />
                  </div>
                  <div style={{ height: "20px", background: "brown" }}></div>
                </div>
              </Allotment.Pane>
            </Allotment>
          </div>{" "}
        </div>
      </div>
    </div>
  );
}

CodePudding user response：

Hi so i made a few little correction, look for ***********HERE

try playing with the sizes of your containers. remember that Bottom

and Right go on forever. So I you use 100% of height and there is no bottom

import React from "react";
import { Allotment } from "allotment";
import "./styles.css";
import "allotment/dist/style.css";

export default function App() {
  return (
    <div className="App">
      <div style={{ background: "blue", minHeight: "42px" }}>Monitor</div>
      <div style={{ display: "flex", height: "100%", background: "darkblue" }}>
        <div
          style={{
            border: "1px solid orange",
            width: "100px",
            height: "100%",
            background: "gray"
          }}
        >
          side content
        </div>
        <div style={{ width: "100%", height: "100%" }}>
          <div
            style={{
              width: "100%",
              height: "100vh",// ***********HERE
              background: "red",
              border: "3px solid yellow"
            }}
          >
            <Allotment>
              <Allotment.Pane>
                <div style={{ height: "40px", background: "brown" }}></div>
                <div
                  style={{
                    display: "flex",
                    height: "50vh", // ************HERE
                    flexDirection: "column",
                    justifyContent: "space-between",
                  }}
                >
                  <div>
                    <img
                      style={{ width: "100%", height: "auto" }}
                      src={require("./the-mandalorian.jpg")}
                      alt="cat"
                    />
                  </div>
                  <div style={{ height: "20px", background: "brown" }}></div>
                </div>
              </Allotment.Pane>
              <Allotment.Pane>
                <div style={{ height: "40px", background: "brown" }}></div>
                <div
                  style={{
                    display: "flex",
                    height: "50vh", // *********************HERE
                    flexDirection: "column",
                    justifyContent: "space-between"
                  }}
                >
                  <div>
                    <img
                      style={{ width: "100%", height: "auto" }}
                      src={require("./nature.jpg")}
                      alt="cat"
                    />
                  </div>
                  <div style={{ height: "20px", background: "brown" }}></div>
                </div>
              </Allotment.Pane>
            </Allotment>
          </div>{" "}
        </div>
      </div>
    </div>
  );
}

CodePudding user response：

<img
    style={{ width: "100%", height: "auto" }}
    src={require("./the-mandalorian.jpg")}
    alt="cat"
 /><div style={{ height: "20px", background: "brown" }}></div>

try this? hope it helps

CodePudding user response：

The problem is inside <Allotment.Pane> tag.

In your second <div> element inside <Allotment.Pane> change the style height: "100%" to height: "auto"

You don't see the brown div element because your images parent div element is using the whole column with the height of 100%. So the below HTML element has been pushed out.

If you add border: '1px solid white' to the images parent container you will see what I mean.

Try this

<Allotment>
              <Allotment.Pane>
                <div style={{ height: "40px", background: "brown" }}></div>
                <div
                  style={{
                    display: "flex",
                    height: "85%",
                    flexDirection: "column",
                    justifyContent: "space-between",
                    border: "1px solid white"
                  }}
                >
                  <div>
                    <img
                      style={{ width: "100%", height: "auto" }}
                      src={require("./the-mandalorian.jpg")}
                      alt="cat"
                    />
                  </div>
                </div>
                <div
                  style={{
                    height: "15%",
                    background: "brown",
                    border: "1px solid white"
                  }}
                ></div>
              </Allotment.Pane>
              <Allotment.Pane>
                <div style={{ height: "40px", background: "brown" }}></div>
                <div
                  style={{
                    display: "flex",
                    height: "85%",
                    flexDirection: "column",
                    justifyContent: "space-between",
                    border: "1px solid white"
                  }}
                >
                  <div>
                    <img
                      style={{ width: "100%", height: "auto" }}
                      src={require("./nature.jpg")}
                      alt="cat"
                    />
                  </div>
                </div>
                <div style={{ height: "15%", background: "brown" }}></div>
              </Allotment.Pane>
            </Allotment>