Flexbox - How to create a border around and between differently sized items-CodePudding

I'm trying to make a Flexbox that looks like this: Flexbox layout, where there's a border around the entire Flexbox, as well as between the two items.

My issue is that I can either get a border around the entire Flexbox, but not between the items, or I can add a border between the items but it doesn't stretch the entire length of the Flexbox.

I've played around with align-content, align-items, justify-content, margins, padding...I just can't figure out how to have 2 items that are centered vertically and horizontally, with a border that stretches the length of the box.

Thanks so much in advance!

.container {
    display: flex;
    height: 300px;
    border: solid red 2px;
    align-items: center;
    
}

.content {
    border: solid grey 2px;
    flex-basis: 50%;
    padding: 30px;
}

<body>
    <div >

        <div >
            <img href="#fillThisInLater" alt="circle" titel="Circle">
        </div>

        <div >
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis rerum iste ratione cum sit illo est tenetur fugit sapiente eum enim maiores laborum voluptatem amet, alias vero, ut velit eos!
        </div>
    </div>
</body>

CodePudding user response：

Since your flex container has a defined height, the border issue will be solved if you add height: 100%; and box-sizing: border-box; to the flex-items.

EDIT: To center the contents inside the flex-items, make them also flex-containers with settings as shown below:

.container {
  display: flex;
  height: 300px;
  border: solid red 2px;
}

.content {
  border: solid grey 2px;
  flex-basis: 50%;
  padding: 30px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<div >

  <div >
    <img href="#fillThisInLater" alt="circle" titel="Circle">
  </div>

  <div >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis rerum iste ratione cum sit illo est tenetur fugit sapiente eum enim maiores laborum voluptatem amet, alias vero, ut velit eos!
  </div>
</div>

If you only want a "middle line" and no separate outside borders for the flex items, just only apply a border-right to the first flex-item:

.container {
  display: flex;
  height: 300px;
  border: solid red 2px;
}

.content {
  flex-basis: 50%;
  padding: 30px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
}
.content:first-child {
  border-right: solid grey 2px;
}

<div >

  <div >
    <img href="#fillThisInLater" alt="circle" titel="Circle">
  </div>

  <div >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis rerum iste ratione cum sit illo est tenetur fugit sapiente eum enim maiores laborum voluptatem amet, alias vero, ut velit eos!
  </div>
</div>

CodePudding user response：

To remove the double border in the middle, remove the 'left' side from the last-child:

.container > div:last-child {
  border-left: unset;
}

.container {
    display: flex;
    height: 300px;
    border: solid red 2px;
    align-items: center;
    padding: 10px 5px;
    
}

.content {
    display: flex;
    border: solid grey 2px;
    flex-basis: 50%;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 5px 15px;
}

.container > div:last-child {
  border-left: unset;
}

<body>
    <div >

        <div >
            <img href="#fillThisInLater" alt="circle" titel="Circle">
        </div>

        <div >
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis rerum iste ratione cum sit illo est tenetur fugit sapiente eum enim maiores laborum voluptatem amet, alias vero, ut velit eos!
        </div>
    </div>
</body>

CodePudding user response：

You can simulate a border-like line by using the gap property in combination with a background color. With it you can create space between the flex-items and let the background color of the container bleed through.

This method will make having a dynamic number of rows and columns a lot easier to handle compared using the border property.

.container {
  --border-width: 2px;
  display: flex;
  gap: var(--border-width);
  height: 300px;
  border: solid grey var(--border-width);
  align-content: center;
  background: grey;
}

.content {
  display: flex;
  align-items: center;
  flex-basis: 50%;
  background: white;
}

.inner-content {
  padding: 30px;
}

<body>
  <div >
    <div >
      <div >
        <img href="#fillThisInLater" alt="circle" titel="Circle">
      </div>
    </div>

    <div >
      <div >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis rerum iste ratione cum sit illo est tenetur fugit sapiente eum enim maiores laborum voluptatem amet, alias vero, ut velit eos!
      </div>
    </div>
  </div>
</body>

CodePudding user response：

Fit the child elements to entire height

.container {
  display: flex;
  height: 300px;
  /* border: solid red 2px; */
  /* align-items: center; */
}

.content {
  border: solid grey 2px;
  flex-basis: 50%;
  /* padding: 30px; */
  height: 100%;
  display: flex;
  align-items: center;
}

<div >
  <div >
    <img href="#fillThisInLater" alt="circle" titel="Circle" />
  </div>

  <div >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis rerum
    iste ratione cum sit illo est tenetur fugit sapiente eum enim maiores
    laborum voluptatem amet, alias vero, ut velit eos!
  </div>
</div>