How to align-items: center AND align-self: stretch?

Question

I have an element I'd like to be (cross-axis) centered but also 'grow' to a nominal size even with too-little content, BUT ALSO 'shrink' when the width of the page becomes smaller than 350px wide.

HTML

<div class="parent">
  <div class="child">
    Some content
  </div>
</div>

SCSS

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;

  .child {
    max-width: 350px; 
    align-self: stretch;
  }
}

Adding align-self: stretch; to .child does the job of making it 350px wide, but it seems to negate the align-items: center; in .parent

Is there a way to do this in CSS that I'm missing? Please note that the element can't just be 350px wide all the time - it must also respond to horizontal page resizing as it does in the example fiddle.

Fiddle: https://jsfiddle.net/1uqpxn8L/1/

Answer 1

UPDATED

I think you should use justify-content to h-align child to center.

Please note, when you apply display: flex property to parent, you should apply flex property to child.

.parent {
  background: yellow;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.parent .child {
  background: black;
  color: white;
  text-align: center;
  flex: 1 1 auto;
  width: 100%;
  max-width: 350px;
}

<div class="parent">
  <div class="child">
    I should be 350px wide
    <br> and centered in the yellow
    <br> unless the page gets smaller,
    <br> in which case I should have
    <br> 10px padding on either side.
  </div>
</div>

Please see the result here, hope this is what you mean: https://jsfiddle.net/1uqpxn8L/11/