图片无法填满父div宽度的问题排查及flex布局解决方案

我需要一张能随叠加文本自适应调整尺寸的图片。设置width:100%;仅能填充约一半页面，max-width:100%;的填充范围更小。我已通过边框确认父元素占据了我期望图片填充的空间，图片的CSS位于样式表底部，网上找不到完全相同的问题案例。

非常简单，只需要给.mainsection添加flex-direction: column属性即可。问题根源是两个div共享了同一空间，真是新手失误 :)

代码示例 #

HTML #

<!doctype html>
<html lang="en"> 

<head>
<title>Berry Wild's Pizzaria</title>
<link rel="stylesheet" href="css/about.css">
</head>

<body>
<div class="main" style="background-image: url('img/pizzaalien.png');">
 <h1>All About Berry Wild's Pizzaria</h1>

<ul class="mainmenu" style="background-image: url('img/menubackground.png');">
<li><a href="index.html">Home</a></li>
<li><a href="order.html">Order</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

</div>

<div class="about-base">
    <div class="mainsection">
    <img src="img/john.png">
    <p>
    Many people have worked on ways to deliver pizza to space travelers. We find 
simplest option is to send one of the pizzas directly to the astronaut's home from the 
moon or an asteroid through a wormhole or portal. This would save time and transport gas 
for the trip. Other methods of delivery include using a flying saucer or even a 
helicopter train system. Some have even proposed sending individual slices via rocket- 
powered ice shiver units. However, astronauts must factor in environmental conditions
when planning meals away from Earth.  With us you worry no longer.

    Being far from Earth can make people feel hungry; pizzas are easy to prepare and are 
good calorie sources. Plus, astronauts spend most of their time in spacesuits that don't 
properly cook foods beyond their required temperatures. Our food shippers can send pre- 
cooked cooked pizzas that don't require any cooking by the astronauts themselves except
for heating them up before eating them.
</p>
</div>
</div>

</body>
</html>

CSS #

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

*
{padding:0; margin:0;}

html
{
width:100%;
height:100%;    
}
body
{
display:flex;
width:100%;
height:100%;
flex-wrap: wrap;
background-size:contain;
background-repeat:no-repeat;
background-attachment: fixed;
background-position: center; 
}

div.main
{
/* border:green 2px solid; */
width:100%;
height:400px;
display:flex;
flex-direction: column;
}

h1
{
/* border: purple 2px solid; */
width: 100%;
height: 67%;
font-family: 'Silkscreen', cursive;
font-size: 82px;
color: DarkMagenta;
text-shadow: 0 0 5px crimson, 0 0 7px crimson, 0 0 5px gold, 0 0 5px gold, 0 0 12px 
magenta, 0 0 12px magenta, 0 0 20px lime, 0 0 20px lime, 0 0 17px lime;
margin-top: 80px;
text-align: center;
}

ul.mainmenu
{
border:MediumVioletRed 5px solid;
border-style: inset;
display:flex;
background-repeat:repeat;
background-size:contain;
height:60px;
justify-content:center;
align-items:center;
}

li
{
border: OrangeRed 6px solid;
border-radius:5px;
border-image:linear-gradient(90deg,red,blue,green,yellow);
border-image-slice:1;
background-color:DarkMagenta;
width: 160px;
list-style: none;
font-size: 42px;
text-decoration:none;
text-align:center;
}

li a
{
text-decoration:none;
color:lime;
text-shadow:0 0 2px LimeGreen,0 0 3px LimeGreen,0 0 4px LimeGreen;
font-family:'Silkscreen', cursive;
}

div.about-base
{
border:purple 3px solid;
display: flex;
background-repeat: no-repeat;
width:100%;
height:967px;
align-self:center;
background-size:contain;
}

div.about-base section
{
/* border:cyan 2px solid; */
width:100%;
height:100%;
}

div.about-base div.mainsection
{
border:red 2px solid;
display:flex;
width:100%;
height:100%;
justify-content:center;
flex-direction: column; /* 新增：解决问题的关键属性 */
}

div.about-base div.mainsection p
{
/* border: cyan 2px solid; */
color:red;
font-size: 23px;
text-shadow:1px 1px #60196c,1px 1px 3px #60196c;
position:relative;
font-family: 'Amatic SC', cursive;
width:48%;
height:36%;
top:232px;
right:370px;
}

div.about-base div.mainsection img
{
border:green 2px solid;
width:100%;
height:100%;
}

内容的提问来源于stack exchange，提问作者Andrew B