질문

4 개의 자식 div가 부모의 아래쪽 테두리를 완전히 덮는 아래쪽 테두리를 갖기를 원합니다. 이유는 상위 하단 경계가 "클릭되지 않은"의 개요이고 하위 div가 "클릭 된"탭의 컬러 하단 경계인 것입니다. 이 동작을 어떻게 수행 할 수 있습니까?

https://codesandbox.io/s/react-slick-playground-d5f1c?file=/Navbar.js

import React, { useState } from "react";
import Tab from "./Tab";
import { StyledTabs, NavbarOutline } from "./StyledNavbar";

const Navbar = ({ value, children, tabFilter, contentFilter }) => {
  const [activeTab, setActiveTab] = useState(value[0].title);

  const onClickTabItem = tab => {
    setActiveTab(tab);
  };

  return (
    <React.Fragment>
      <NavbarOutline>
        <ol>
          {value.map(child => {
            const { title } = child;
            return (
              <Tab
                activeTab={activeTab}
                key={title}
                title={title}
                handleClick={onClickTabItem}
              />
            );
          })}
        </ol>
      </NavbarOutline>
      <div>
        {value.map(child => {
          if (child.title !== activeTab) return undefined;
          return <StyledTabs className="content">{child.title}</StyledTabs>;
        })}
      </div>
    </React.Fragment>
  );
};

export default Navbar;

import styled from "styled-components";

export const NavbarOutline = styled.div`
  border-bottom: 2px solid #e3e3e3;
  margin: auto;
  width: 100%;
  white-space: nowrap;
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
  &::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }
`;

export const StyledTabs = styled.button.attrs(props => ({
  className: props.className
}))`
  &.not-active {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    list-style: none;
    padding: 16px 31px 16px 31px;
    background: none;
    border: none;
    position: relative;
    bottom: -18px;
  }
  &.active {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    color: #2b8000;
    line-height: 20px;
    list-style: none;
    padding: 16px 31px 16px 31px;
    background: none;
    border: none;
    border-bottom: 2px solid #2b8000;
    position: relative;
    bottom: -18px;
  }
  &.content {
    list-style: none;
    background: none;
    border: none;
    float: left;
  }
`;