В CSS разные элементы страницы не могут «знать» друг друга.Самая близкая вещь, которую вы можете получить, это использовать гибкий экран и / или сетку.Таким образом, прямой родитель может контролировать то, как будут отображаться его дочерние элементы, что-то вроде React.
Основное различие между flex и grid состоит в том, что flex это 1 ось, а grid 2 ось.
Рабочий пример с использованием grid и flex:
<div class="container">
<div class="summary"><span class="text">Synonyms</span> <span class="icon">+</span></div>
<div class="details">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet officiis sequi perspiciatis sapiente iure minus laudantium! Quidem iure consectetur quod odit iusto, labore sunt quae, enim nesciunt officiis, quia ad.</p>
</div>
<div class="summary"><span class="text">Concept</span> <span class="icon">+</span></div>
<div class="details">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet officiis sequi perspiciatis sapiente iure minus laudantium! Quidem iure consectetur quod odit iusto, labore sunt quae, enim nesciunt officiis, quia ad.</p>
</div>
<div class="summary"><span class="text">Terms</span> <span class="icon">+</span></div>
<div class="details">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet officiis sequi perspiciatis sapiente iure minus laudantium! Quidem iure consectetur quod odit iusto, labore sunt quae, enim nesciunt officiis, quia ad.</p>
</div>
</div>
<style>
.container {
display: grid;
/* summary's width needs to be relative to the longest text
and details needs to span the whole grid */
grid-template-columns: auto auto;
}
.summary {
grid-column: 1 / 2; /* start at the beginning of 1st column and end at the beginning of the 2nd column */
display: flex; /* create horizontal layout */
justify-content: space-between; /* place the available space between the children */
}
.details {
grid-column: 1 / 3; /* start at the beginning of 1st column and end at the end of the 2nd column */
}
</style>
Как видите, он очень удобочитаемый и требует очень небольшой разметки.
С flex и grid вам нужнодумать на 2 уровнях parent > child.Это означает, что вам нужно соответствующим образом изменить компонент React:
const Expander = ({children, title, onExpandToggle, isExpanded}) => (
<>
<div class="summary" onClick={onExpandToggle}><span class="title">{title}</span> <span class="icon">+</span></div>
{isExpanded && (
<div class="details">
{children}
</div>
)}
</>
);
Здесь я удалил оболочку div, чтобы использовать Fragment, чтобы .summary и .details были прямыми потомками.container.Обратите внимание, что я также переместил onClick на весь заголовок по причинам UX.
CSS Grid очень полезен и гибок, его стоит изучить .Браузер поддерживает недавно, но довольно хорошо, просто убедитесь, что вы используете авторефиксер.
Вы также можете использовать трюки, используя display: inline-block;, размер которого основан на его дочерних элементах, но будет включать обходные пути, когда одиниз детей нужно переполнить (как в вашем случае).Поэтому я не рекомендую это.Я бы также советовал не использовать Javascript.
Не стесняйтесь сказать мне, что вы думаете об этом ответе.