Buttons getting chopped off with flex-direction: column - css

Question

I was trying to make a chat UI with some actions that show in an overlay, but the buttons got chopped off. Here's what I tried to do:
.parent {
position: relative;
overflow: hidden;
background: #111;
color: white;
}
.overlay {
background: purple;
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
I'm looking for something that looks like a grid, and would get longer if more buttons were added.
If I set flex-direction to row instead, it works fine, but that makes the buttons not be stacked. If I remove overflow: hidden I can see the buttons outside of the overlay, instead of it staying inside of the box. If I set a width for the overlay, things work fine, but I want the width to be dynamic.

Answer 1

Is this what you are looking for?
What I did was made the parent container display: flex; so it will expand to the size of the child div .overlay, then simply made the overlay a grid with only 1 column in order to have the buttons in 1 column.
.parent {
position: relative;
background: #111;
color: white;
height: 100%;
display: flex;
}
.overlay {
background: purple;
display: grid;
grid-template-columns: 1fr;
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
EDIT: ok maybe this is what you want?
.parent {
position: relative;
overflow: hidden;
background: #111;
color: white;
}
.overlay {
background: purple;
position: absolute;
right: 0;
top: 0;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
OK last edit then im giving up if this isn't it:
.parent {
position: relative;
overflow: hidden;
background: #111;
color: white;
display: flex;
}
.overlay {
background: purple;
display: inline-block;
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.'
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>

Answer 2

Try giving the parent a fixed height, based on the height of the buttons. For example if I try: height: 100px; then I can see the buttons just fine as a vertical grid to the right of the text.

Answer 3

#container{
display:flex;}
#x, #y{
display:flex;}
<div id='container'>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
</div>
<div>
<div id='x'>
<button>
A
</button>
<button>
B
</button>
</div>
<div id='y'>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
</div>

Answer 4

Got this to work with grid:
.parent {
position: relative;
overflow: hidden;
background: #111;
color: white;
}
.overlay {
background: purple;
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>

Answer 5

Flex can do it.
Make three minor adjustments to your CSS code. (No changes to HTML.)
.parent {
position: relative;
/* overflow: hidden; */ /* 1 */
background: #111;
color: white;
}
.overlay {
background: purple;
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: flex;
/* flex-direction: column; */ /* 2 */
flex-wrap: wrap;
}
button {
flex-basis: 50%; /* 3 */
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>