嵌套的 flexbox 列重叠

Question

使用 React 和 Styled Components 我遇到了一些相互重叠的元素：

有三样东西重叠，分别是：

• <ul> 元素下方的填充与其下方的按钮重叠（该按钮实际上是一个 React Router Link，因此是一个 <a>）。
• “请求报价”链接与其下方的 <h2> 重叠。

从下面的代码中可以看出，<ul> 和 <a> 是 <div>（flex 列）的子代。查看开发工具中的元素，我注意到这个 div 的高度比它的子元素加起来要短，所以它以某种方式崩溃了（这是描述它的正确方式吗？）。

如果您查看 div 的高度，我在上面所说的 <h2> 和 <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

我用 <button> 切换了 React Router Link 元素，并以编程方式更改了路由。

现在没有重叠了。

我使用了这个代码：

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