Fit flex parent cross-axis to items - css

Question

Where the parent has display: flex; flex-direction: column, is it possible to make the parent's width expand to fit a flex item wider than the parent?
It's worth noting that the grandparent does not have display: flex nor a fixed width. It has a min-width: 100% though.

Answer 1

Yes, you can, and by using inline-flex instead of flex, it will grow with the child.
The reason why the flex parent won't grow along with its child when using flex is because flex work similar to a block element, and block element won't grow larger than its parent, which inline element does.
This can be seen here, where the grand parent, with or w/o min-width: 100%, won't grow with its content, but the inline-flex will. This would also be the case if the flex element would instead have inline-block.
Still, the parent's content will overflow and effect its surroundings as if it would grow with content, and make the outer scroll to show up.
Why the parent with min-width is slightly wider is because of the padding not being included in its set width, so adding box-sizing: border-box; to its rule will make them equal wide.
Stack snippet
.parent {
padding: 20px;
background: yellow;
}
.parent.with-min-width {
min-width: 100%;
}
.flex {
display: inline-flex;
flex-direction: column;
background-color: red;
padding: 20px;
}
.flex .item {
width: 800px;
padding: 20px;
background-color: blue;
}
<div class="parent">
<div class="flex">
<div class="item">
</div>
</div>
</div>
<div class="parent with-min-width">
<div class="flex">
<div class="item">
</div>
</div>
</div>

Answer 2

Using inline-flex on the parent instead of flex and inline-block on the grandparent should do the trick.
Example B shows the modifications. If the img is wider than the viewport the parent and the grandparent will accommodate it (shrink your window down so img is wider than the viewport then scroll right).
html,body {
width: auto;
}
.grandparent {
width: 300px;
background-color: blue;
padding: 10px;
}
.parent {
display: inline-flex;
flex-direction: column;
background-color: red;
padding: 10px;
}
.exampleB .grandparent {
min-width: 100%;
width: auto;
display: inline-block;
}
.exampleB .parent {
width: auto;
}
<section class="exampleA">
<div class="grandparent">
<div class="parent">
<div class="child">
<img src="//placehold.it/500x100"/>
</div>
</div>
</div>
</section>
<br/>
<section class="exampleB">
<div class="grandparent">
<div class="parent">
<div class="child">
<img src="//placehold.it/500x100"/>
</div>
</div>
</div>
</section>