У меня есть следующая html-разметка:
<section class="editor__content editor-content">
<button class="editor-content__scroll editor-content__scroll_prev"></button>
<section class="editor-content__wrapper">
<article class="edit-block">
<div class="edit-block__wrapper">
<canvas width="844" height="1200" class="edit-block__image"></canvas>
</div>
</article>
<article class="edit-block">
<div class="edit-block__wrapper">
<canvas width="844" height="1200" class="edit-block__image"></canvas>
</div>
</article>
<!-- Еще edit-blockи -->
</section>
<button class="editor-content__scroll editor-content__scroll_next"></button>
</section>
И css:
body * {
box-sizing: border-box;
min-width: 0;
max-width: 100%;
font-family: inherit;
}
.editor-content {
display: flex;
overflow: hidden;
background-color: var(--color-background-3);
}
.editor-content__scroll {
flex: none;
width: 50px;
height: 100%;
background-color: transparent;
color: #111;
z-index: 9;
transition: .7s background-color;
}
.editor-content__scroll:hover {
background-color: #eee;
}
.editor-content__scroll:before {
font: 900 40px "Font Awesome 5 Pro";
content: "\f104";
}
.editor-content__scroll_prev {
left: 0;
}
.editor-content__scroll_next {
right: 0;
transform: rotate(180deg);
}
.editor-content__wrapper {
flex: auto;
display: flex;
overflow: hidden;
}
.edit-block {
flex: none;
overflow: auto;
width: 100%;
}
.edit-block__wrapper {
position: relative;
max-width: none;
}
.edit-block__text,
.edit-block__draw {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Если max-width: 100% для всех элементов, то canvas имеет 100% ширины родителя, и высоту, зависящую от своего соотношения сторон. Но почему-то если задать max-width: none элементу edit-block__wrapper, ничего не изменится, а если задать то же свойство canvas, то он выйдет за границы родителя. А мне нужно, чтобы edit-block__wrapper имел те же размеры, что и canvas. Как это реализовать?