Different flex containers side by side - html

Question

I'm trying to make it such that I have two half-width wrappers side by side. Currently the wrappers do take half the space but don't appear side to side. The display:flex seems to be taking the whole width and leaving the unused space on the side as margin.
.wrapper {
display: flex;
flex-direction: column;
width: 40%;
border: 1px solid black;
}
<div class="wrapper">
<div class="title">Test Title</div>
<div class="info">
<div class="column">
<b>1</b>
<span>One</span>
</div>
<div class="column">
<b>2</b>
<span>Two</span>
</div>
</div>
</div>
<div class="wrapper">
<div class="title">Test Title</div>
<div class="info">
<div class="column">
<b>1</b>
<span>One</span>
</div>
<div class="column">
<b>2</b>
<span>Two</span>
</div>
</div>
</div>
I also tried adding another div outside wrapper with width 50% but it didn't help. Any ideas?

Answer 1

Instead of display: flex, use display: inline-flex.
The first is a block-level element which, by default, takes the full width of the parent.
The second is an inline-level element, which can co-exist with other elements on the same line.
.wrapper {
display: inline-flex;
flex-direction: column;
width: 40%;
border: 1px solid black;
}
<div class="wrapper">
<div class="title">Test Title</div>
<div class="info">
<div class="column">
<b>1</b>
<span>One</span>
</div>
<div class="column">
<b>2</b>
<span>Two</span>
</div>
</div>
</div>
<div class="wrapper">
<div class="title">Test Title</div>
<div class="info">
<div class="column">
<b>1</b>
<span>One</span>
</div>
<div class="column">
<b>2</b>
<span>Two</span>
</div>
</div>
</div>
Alternatively, set the parent element to display: flex which, by default, forces the children to exist in the same row.
Add this to your code: body { display: flex }.
.wrapper {
display: flex;
flex-direction: column;
width: 40%;
border: 1px solid black;
}
body {
display: flex;
}
<div class="wrapper">
<div class="title">Test Title</div>
<div class="info">
<div class="column">
<b>1</b>
<span>One</span>
</div>
<div class="column">
<b>2</b>
<span>Two</span>
</div>
</div>
</div>
<div class="wrapper">
<div class="title">Test Title</div>
<div class="info">
<div class="column">
<b>1</b>
<span>One</span>
</div>
<div class="column">
<b>2</b>
<span>Two</span>
</div>
</div>
</div>

Answer 2

I believe display: flex is similar to display: block if it's a top level element. The difference being; the children of the flex container will be able to utilize the flex behavior. What you need to do is something like this:
body {
margin: 0;
}
.parent {
display: flex;
height: 100vh;
background: #eee;
}
.child {
display: flex;
flex-direction: column;
flex: 1;
border: 1px dashed #ccc;
}
<div class='parent'>
<div class='child column'>child 1</div>
<div class='child column'>child 2</div>
</div>

Answer 3

Wrap the wrappers with div and then display: flex.
.main-wrapper {
display: flex;
}
.wrapper {
display: flex;
flex-direction: column;
width: 50%;
border: 1px solid black;
}
<div class="main-wrapper">
<div class="wrapper">
<div class="title">Test Title</div>
<div class="info">
<div class="column">
<b>1</b>
<span>One</span>
</div>
<div class="column">
<b>2</b>
<span>Two</span>
</div>
</div>
</div>
<div class="wrapper">
<div class="title">Test Title</div>
<div class="info">
<div class="column">
<b>1</b>
<span>One</span>
</div>
<div class="column">
<b>2</b>
<span>Two</span>
</div>
</div>
</div>
</div>