Я пытаюсь вложить два дочерних элемента в оболочку, которая задает боковые поля, чтобы между его содержимым и сторонами экрана было свободное пространство, когда дисплей узкий, и max-width
для дисплея широко.
Второй дочерний элемент имеет некоторое переполнение, которое должно быть видно, в то время как первый дочерний элемент должен находиться строго внутри поля содержимого оболочки. При удалении первого ребенка второй ребенок ведет себя так, как ему хочется. Однако, когда я добавляю первого дочернего элемента, он полностью игнорирует поля оболочки, растягивая окно содержимого оболочки и разрывая вместе с ним второй дочерний элемент.
Применение overflow: hidden
к оболочке устраняет проблему с полями, но обрезает второго потомка. Применение полей к первому дочернему элементу не привело к его коллапсу с родительским элементом, поскольку в новом контексте форматирования блока.
Единственный обходной путь, который я нашел, - это сделать:
.wrapper {
> * {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
}
и увеличьте максимальную ширину обертки на 3rem, но я надеялся, что найдется какое-то решение, которое не потребует от меня сдвига поля от обертки до ее дочерних элементов.
https://codepen.io/HybridCore/pen/jjoWmd
body {
background-color: #000;
color: #FFF;
display: flex;
justify-content: center;
}
.wrapper {
margin: 0 1.5rem;
max-width: 40rem;
width: 100%;
}
.fit_content_box {
display: flex;
align-items: center;
}
.L {
min-width: 0;
flex: 1 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.R {
margin-left: 1rem;
height: 1rem;
width: 1rem;
background-color: #FFF;
}
.overflow {
display: flex;
justify-content: space-between;
}
.overflow>div {
width: 0;
display: flex;
justify-content: center;
}
<body>
<div class="wrapper">
<div class="fit_content_box">
<p class="L">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="R"></div>
</div>
<div class="overflow">
<div>
<p>0</p>
</div>
<div>
<p>12</p>
</div>
<div>
<p>24</p>
</div>
</div>
</div>
</body>