центрированный макс-ширина не является жидкостью с дисплеем: flex

Question

Для размещения предметов с display: block используют людей margins: auto. Если я установил max-width ребенку, который должен быть центрирован, и есть достаточно места вокруг него, он будет настолько же текущим, насколько это необходимо (в зависимости от его содержимого) до max-width. Но если я изменю свойство display родительского элемента на flex, он больше не занимает все свободное пространство. Мне действительно нужно использовать max-width, так как я хочу, чтобы элемент сжимался на маленьких экранах.

Вот jsfiddle. Нажатие на кнопку свопит display: flex на display: block на родителя. Я хочу зеленое пространство на flex для жидкости, насколько это возможно для max-width, как это сделано с display:block

EDIT: Я также хотел бы использовать flex-direction: column

$('input').click(function() { 
 
    var curDisplay = $('#parent').css('display'); 
 
    if (curDisplay == 'block') { 
 
    $('#parent').css('display', 'flex'); 
 
    $('input').val('flex'); 
 
    } else { 
 
    $('#parent').css('display', 'block'); 
 
    $('input').val('block'); 
 
    } 
 
})

#parent { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    background-color: red; 
 
    height: 50px; 
 
} 
 
#child { 
 
    max-width: 300px; 
 
    background-color: green; 
 
    height: 50px; 
 
    margin: auto; 
 
} 
 
input { 
 
    width: 100%: 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"> 
 
    <div id="child"> 
 
    <input type="button" value="Click Me!" /> 
 
    </div> 
 
</div>

Answer 1

Я думаю, вы ищете flex-основу. Используя%, вы можете приблизиться. Вы можете использовать px для установки начальной ширины, она все равно будет «реагировать», пока вы не нажмете минимальную ширину, если вы ее установили.

на дочерний элемент:

div { 
    flex-basis:40%; 
} 

Вот W3