У меня есть раздел плиток Bulma (некоторые вложенные), и один из них используется для отображения фрагментов постов в блоге.Я хотел бы иметь полосу прокрутки на стороне, но с использованием высоты: 100% она идет на всю страницу.Использование gatsby.js SSG.
Я уже пробовал без каких-либо пользовательских CSS.он растягивает весь набор вложенных времен.
Использование 100% пост-содержимого стекает с нижней части плитки.
При использовании 80% это подходит, но это очень смешно и требуетбыть хорошо настроенным, если любой из других членов временного гнезда изменится.
jsx в index.js
<section className="section">
{/* ----------------------------- */}
<div className="container">
<div className="content">
<div className="tile is-ancestor">
<div className="tile is-vertical is-8">
<div className="tile">
<div className="tile is-parent is-vertical">
<article className="tile is-child notification is-primary">
<p className="title">STEM Professional</p>
<p className="subtitle">
Connect with local professionals
</p>
{/* todo: grab parts of a profile(random profile) and make a mini profile that leads to profile page */}
<a
className="button is-large is-pulled-right is-primary is-inverted is-outlined .align-self-end"
href="/profiles"
>
connect
</a>
</article>
<article className="tile is-child notification is-warning">
<p className="title">Upcoming Meetings</p>
<ul>
<li>
<h5>
STEM Hub action meeting: 6/4/2019 - 4:30pm
<small> - Library - St Mary's college.</small>
</h5>
</li>
</ul>
{/*ToDo: Create a meeting component and have a list here(CMS?)*/}
</article>
</div>
<div className="tile is-parent">
<article className="tile is-child notification is-info">
<p className="title">Showcase</p>
<p className="subtitle">
Comming soon - showcase of local STEM activities and
entities.
</p>
<figure className="image is-4by3">
{/* todo: use a card? */}
<img src="https://bulma.io/images/placeholders/640x480.png" />
{/* todo: get this image from showcase(blog?) articles
also need a way to select this (isCurrent field?) in CMS */}
</figure>
<p>Quick description / tagline :)</p>
</article>
</div>
</div>
<div className="tile is-parent">
<article className="tile is-child notification is-danger">
<p className="title">Our Mission</p>
<div className="content">
{/* <!-- Content --> */}
<div class="columns">
<div class="colum is-four-fifths">
<ul>
<li>expand the hub of STEM resource sharing</li>
<li>
lend awareness to local STEM issues and
achievements
</li>
<li>
audit and profile people and programs within our
region
</li>
<li>
build opportunities for Teacher professional
development sessions
</li>
<li>
support and promote a variety of STEM activities
</li>
</ul>
</div>
<div class="column">
<a
className="button is-large is-pulled-right is-danger is-inverted is-outlined align-self-end "
href="/about"
>
read more
</a>
</div>
</div>
</div>
</article>
</div>
</div>
<div className="tile is-parent">
<article className="tile is-child notification is-success ">
{/* todo: generate our own colours classes here? */}
<div className="content">
<p className="title">Latest News</p>
<p className="subtitle">List of blog posts</p>
<div className="content is-scrollable">
{/* <!-- Content --> */}
{posts.map(({ node: post }) => (
<div
className="content"
style={{
border: '1px solid #333',
padding: '2em 4em'
}}
key={post.id}
>
<p>
<Link
className="has-text-primary"
to={post.fields.slug}
>
{post.frontmatter.title}
</Link>
<span> • </span>
<small>{post.frontmatter.date}</small>
</p>
<p>
{post.excerpt}
<br />
<br />
<Link
className="button is-small"
to={post.fields.slug}
>
Keep Reading →
</Link>
</p>
</div>
))}
</div>
</div>
</article>
</div>
</div>
</div>
</div>
{/* ----------------------------- */}
</section>
custom.sass
.is-scrollable
overflow-y: scroll
height: 80%
position: absolute
// width: auto