我一次遇到两个问题。一，使用我的新布局，似乎当我放大时，x滚动条不再出现（它在我进入flex布局之前使用过。）如果我添加“overflow：auto;”对于身体的风格，它会出现，但只有当你向下滚动到底部时，这不是我想要的。
另外，我尝试了一种样式，我可以让悬停颜色覆盖图像而不是替换它。 （我使用了after元素。）它一直工作，直到我进入flex布局。
（另外，有没有办法将滚动添加到其他flex-item div？我不知道什么条件会强制“overflow：auto;”生效。）
[代码]
<html>
<head>
<title> First Baptist Church of LaSalle </title>
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="http://firstbaptistchurchoflasalle.com/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="First Baptist Church of LaSalle" />
<meta property="og:description" content="The website of First Baptist Church of LaSalle" />
<meta property="og:image" content="http://sprbc.org/images/banner1.jpg" />
<link rel="icon" href="./churchImage.png">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<style>
.headerDiv
{
background-color: rgb(90, 7, 31);
width: 1000px;
height: 200px;
color: white;
}
body
{
background-color: beige;
//overflow: auto;
}
ul
{
height: auto;
width: 180px;
//background-color: #122213;
border-style: solid;
border-color: brown;
border-width: 10px;
list-style-type: none;
background-image:url(./greenFelt.jpg);
//border-image-source: url(./wood.jpg);
border-image-width: 10px;
border-image: url(./wood.jpg) 30 stretch;
margin: 0;
//float: left;
}
li
{
font-weight: bold;
font-style: italic;
width: auto;
// background-size: 100%;
text-align: center;
font-family: "Palatino Linotype", Serif;
position: relative;
background-image:url(./Crumpled_Paper_-_White.gif);
background-position:center;
background-repeat:no-repeat;
opacity: 1.0;
font-size: 12px;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 8px;
margin: 10px;
text-align: center;
background-size: 100% 100%;
}
li a
{
text-decoration: none;
color: black;
}
li a:hover:after
{
content:"\A";
//width:97%;
width: 92%;
height:88%;
background:rgba(143, 158, 208, 0.5);
position:absolute;
// top:0;
top: 2.5;
right: 0.0;
left: 2.0;
bottom: 0;
}
li:before
{
content: url(./pin.png);
display: block;
position: absolute;
left: 0px;
top: 0px;
}
li a:hover
{
//background-color: #2233dd;
// opacity: .9;
}
.flex-container {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
width: auto;
height: auto;
}
.flex-item {
width: auto;
height: auto;
margin: 2px;
}
#middle
{
font-family: "Palatino Linotype";
font-size: 14px;
font-style: italic;
}
#right
{
background-color: grey;
}
#container
{
overflow: auto;
}
</style>
<div style="width: 1000px; height: auto; margin: 0 auto;" id="container">
<div class="headerDiv"> <center><h1> First Baptist Church of LaSalle </h1></center>
</div>
<div style="margin: 0; width: 1000px; border: 1px solid blue; height: auto; background-color: tan;" class="flex-container">
<div class="flex-item w3-card-4">
<ul style="width: auto;">
<li> <a href="http://www.firstbaptistchurchoflasalle.com/index.html"> Home</a></li><br/>
<li> <a href="http://www.firstbaptistchurchoflasalle.com/AboutUs.html">About Us</a></li><br/>
<li> <a href="http://www.firstbaptistchurchoflasalle.com/AboutUs.html">Pastoral Staff</a> </li><br/>
<li> <a href="http://www.firstbaptistchurchoflasalle.com/AboutUs.html">Sunday School </a></li><br/>
<li> <a href="http://www.firstbaptistchurchoflasalle.com/AboutUs.html">Services & Directions</a></li><br/>
<li> <a href="http://www.firstbaptistchurchoflasalle.com/AboutUs.html">Calendar </a></li><br/>
<li> <a href="http://www.firstbaptistchurchoflasalle.com/AboutUs.html">Activities</a> </li><br/>
<li> <a href="http://www.firstbaptistchurchoflasalle.com/AboutUs.html">Contact Us </a></li><br/>
<li> <a href="http://www.firstbaptistchurchoflasalle.com/AboutUs.html">Sermons </a></li><br/>
<li> <a href="http://www.firstbaptistchurchoflasalle.com/AboutUs.html">Weekly Bulletin </a></li><br/>
</ul>
</div>
<div class="flex-item" id="middle">
Dear Friends, <br><br/>
<p>Thank you for taking the time to visit our website for First Baptist Church of LaSalle. We invite you to take the time to look at the site and get to know a little bit about us. </p>
<p>First Baptist Church was started in 1839 and has been preaching the Word of God without compromise ever since. The church moved to its current location in 1976. </p>
<p>As pastor of the church, I have had the privilege of working with many wonderful people here at the church. God has blessed us with a great staff and many wonderful people in the congregation.</p>
<p>It is exciting to be here and to see what God is doing now and is going to do in the future. First Baptist Church is a church that cares about people and a place you can make home.</p>
<p>I would encourage you to come and see for yourself what God is doing here. My family and our church would love to see you.</p>
In Christ, <br></br>
Wesley Waddle, Pastor
</div>
<div class="flex-item w3-card-4" id="right">
<U>Contact Information </U><br></br>
<B> PHONE: </B> 815.223.1333 <br></br>
<B> FAX: </B> 815.223.1334 <br></br>
<br></br>
<B>ADDRESS: </B> 200 - 24th Street <br></br>
P. O. Box 1043 <br></br>
LaSalle, IL 61301 <br></br>
<br></br>
</div>
</div>
<footer style="background-color: gold; width: 1000px; height: 200px; margin: 0;">
<center> <div style="font-weight: bold;"> © 2017 - First Baptist Church of LaSalle </div> </center>
<center><div class="flex-container">
<div class="fb-like flex-item" data-href="https://www.facebook.com/First-Baptist-Church-of-LaSalle-106794612807864/" data-width="80" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus flex-item" data-action="share" data-width="150" data-href="http://firstbaptistchurchoflasalle.com/"></div>
<!-- Place this tag after the last share tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<div style="color: black;" class="flex-item"><a href="https://twitter.com/share" class="twitter-share-button" data-text="Come visit our church!" data-size="large">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
</div> </center>
</footer>
</div>
</body>
</html>
[/代码]
对于悬停问题，它没有排列以完全适合图像。顶部两侧的高度太大了。 （原来，“上：0;左：1.8;右：0;下：0;高：100％;宽：97％;”工作，但现在它没有新的布局。）（所以我知道那里应该是一种方法，只需要一个样式用于所有li元素，而不必为每个li元素设置不同的样式。）
此外，现在我记得，在我添加flex项目以包含UL并将flex项目添加到flex容器后，我不得不更改我的背景大小：100％;到背景大小：100％100％;
使其适合图像上的所有单词而不是超出图像。
至于卷轴，由于某种原因，除了使用溢出之外，我可以展示的唯一卷轴：滚动;溢出：auto;对于正文，如果滚动到最底部，则仅显示x滚动。 （有趣的是，y滚动似乎工作得很好。）应用溢出：auto;到#container似乎不起作用。