Вложенные столбцы flexbox перекрываются

Question

Использование React и стилизованных компонентов Я сталкиваюсь с некоторыми элементами, перекрывающими друг друга:

Есть три вещи, которые перекрываются, а именно:

• Заполнение под элементом <ul> перекрывается с кнопкой под ним (кнопка на самом деле является ссылкой React Router, то есть <a>).
• Запрос предложения'Ссылка перекрывается с <h2> под ней.

Как видно из кода ниже <ul> и <a> являются дочерними элементами для <div> (столбец flex).Глядя на элементы в инструментах разработки, я замечаю, что этот div по высоте короче, чем его дочерние элементы, поэтому он каким-то образом развалился (это правильный способ описать его?).

<h2> и<div>, о котором я говорю выше, на самом деле не перекрываются, если вы посмотрите на высоту, которую имеет div.

Я искал, почему код перекрывается, но не могу найти похожую ситуацию, которая объясняется.

Вопрос: Кто-нибудь может объяснить, как правильно отображать эти элементы?

Это код для рисунка выше:

Вставлен только тот код, который кажется необходимым, я выложу полный код ниже.

...

const CartHeaderContainer = styled.div`
  display: flex;
  flex-direction: column;
  padding: 8px;
`;

const HeaderSubContainer = styled.div`
  flex-direction: column;

  @media (orientation: landscape) {
    flex-direction: row;
  }
`;

const H1 = styled.h1`
  font-size: 1.3rem;
  margin: 0 0 0.5rem 0;
`;

const H2 = styled.h2`
  font-size: 1.1rem;
  margin: 0;
`;

...

<CartHeaderContainer>
  <H1>Shopping cart</H1>
  <HeaderSubContainer>
    <List
      data={[
        {
          title: "Products in cart:",
          value: this.props.cartProducts.length
        },
        { title: "Total price:", value: `€ 10000` }
      ]}
      titleKeyName="title"
      valueKeyName="value"
    />
    <ButtonLink to={`/${this.props.match.params.locale}/order/`}>
      Request Quote
    </ButtonLink>
  </HeaderSubContainer>
  <H2>Products in cart:</H2>
</CartHeaderContainer>
...

код для List:

import React, { Component } from "react";
import styled from "styled-components";

const LITitle = styled.p`
  margin: 0;
  width: 60%;
`;

const LIValue = styled.p`
  margin: 0;
  text-align: right;
  width: 40%;
`;

const LI = styled.li`
  display: flex;
  margin: 0.2rem 0 0.2rem 0;
  flex-direction: row;
  flex-wrap: nowrap;

  &:first-child {
    margin-top: 0;
  }
  &:last-child {
    margin-bottom: 0;
  }
`;

const UL = styled.ul`
  list-style: none;
  margin: 0 0 0.5rem 0;
  padding: 0;
`;

class List extends Component {
  renderListElements() {
    let listElements = this.props.data.map(item => (
      <LI>
        <LITitle>{item[this.props.titleKeyName]}</LITitle>
        <LIValue>{item[this.props.valueKeyName]}</LIValue>
      </LI>
    ));
    return listElements;
  }

  render() {
    return <UL>{this.renderListElements()}</UL>;
  }
}

export default List;`

код для ButtonLink:

import { Link } from "react-router-dom";
import styled from "styled-components";

...

export const ButtonLink = styled(Link)`
  background-color: #007ccc;
  border: none;
  border-radius: 5px;
  box-style: border-box;
  color: white;
  padding: 9px 15px 10px 15px;
  margin: 0 0 0.5rem 0;
  text-align: center;
  text-decoration: none;

  @media (min-width: 500px) {
    width: 9rem;
  }
`;

полный код исходного кодового блока:

import React, { Component } from "react";
import styled from "styled-components";
import { ButtonLink } from "../../Style/Style";
import List from "../GenericComponents/List";

import CartItem from "./CartItem";

const CartHeaderContainer = styled.div`
  display: flex;
  flex-direction: column;
  padding: 8px;
`;

const HeaderSubContainer = styled.div`
  flex-direction: column;

  @media (orientation: landscape) {
    flex-direction: row;
  }
`;

const H1 = styled.h1`
  font-size: 1.3rem;
  margin: 0 0 0.5rem 0;
`;

const H2 = styled.h2`
  font-size: 1.1rem;
  margin: 0;
`;

const MainContentContainer = styled.div`
  background: #d1ecfe;
  display: flex;
  flex-direction: column;
`;

const MaxWidthWrapper = styled.div`
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 9px;
  width: 100%;

  @media (min-width: 600px) {
    width: 80%;
  }
`;

const P = styled.p`
  margin: 0;
`;

const SummaryContainer = styled.div`
  display: flex;
`;

class CartDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checkout: false
    };
  }

  updateItems = cart_list => {
    this.props.setCartData(cart_list);
  };

  checkoutCart = () => {
    this.setState({ checkout: true });
  };

  renderContent = () => {
    if (!this.props.cartProducts.length) {
      return (
        <MaxWidthWrapper>
          <P>No items in shopping cart.</P>
        </MaxWidthWrapper>
      );
    } else {
      let cartItems = this.props.cartProducts.map(lot_group => (
        <CartItem lot_group={lot_group} updateItems={this.updateItems} />
      ));
      return (
        <React.Fragment>
          <CartHeaderContainer>
            <H1>Shopping cart</H1>
            <HeaderSubContainer>
              <List
                data={[
                  {
                    title: "Products in cart:",
                    value: this.props.cartProducts.length
                  },
                  { title: "Total price:", value: `€ 10000` }
                ]}
                titleKeyName="title"
                valueKeyName="value"
              />
              <ButtonLink to={`/${this.props.match.params.locale}/order/`}>
                Request Quote
              </ButtonLink>
            </HeaderSubContainer>
            <H2>Products in cart:</H2>
          </CartHeaderContainer>

          {cartItems}

          <MaxWidthWrapper>
            <P>Total price: €{this.props.cartTotalPrice}</P>
            <ButtonLink to={`/${this.props.match.params.locale}/order/`}>
              Request Quote
            </ButtonLink>
          </MaxWidthWrapper>
        </React.Fragment>
      );
    }
  };

  renderCartSummary = () => {
    return (
      <React.Fragment>
        <List />
        <ButtonLink to={`/${this.props.match.params.locale}/order/`}>
          Request Quote
        </ButtonLink>
      </React.Fragment>
    );
  };

  render() {
    let content = this.renderContent();

    return <MainContentContainer>{content}</MainContentContainer>;
  }
}

export default CartDetail;

Answer 1

Я переключил элемент React Router Link с помощью <button> и изменил маршрут программно.

Теперь больше нет перекрытий.

Я использовал этот код:

<Button
  onClick={() => {
    this.props.history.push(
      `/${this.props.match.params.locale}/order/`
    );
  }}
>
  Request quote
</Button>