Ucinanie marginesu wewnętrznego prawego rodzica przez dziecko

Przykład:

<div id="jeden" style="padding:10px;overflow:auto;width:150px; background-color: yellow;">
    <div id="dwa" style="display:flex;flex-direction:row;border: 1px solid lightgrey;width:200px;height:100px;">
      <div style="flex:1 0 auto; background-color:red">div - 1</div>
     <div style="flex:1 0 auto; background-color:blue">div - 2</div>
    </div>
 </div>

Pytanie: Dlaczego w moim przykładzie ucinany jest margines wewnętrzny prawy rodzica id="jeden" przez dziecko id="dwa" i czy to da się uniknąć?

Przesuń padding:10px z jeden do dwa:

<div id="jeden" style="overflow:auto;width:150px; background-color: yellow;">
  <div id="dwa" style="display:flex;flex-direction:row;border: 1px solid lightgrey;width:200px;height:100px; padding:10px;">
    <div style="flex:1 0 auto; background-color:red">div - 1</div>
    <div style="flex:1 0 auto; background-color:blue">div - 2</div>
  </div>
 </div>

Zakładam, że chodziło o sytuację: rodzic o zadeklarowanym wymiarze + większe od niego dziecko, które możesz przewijać w rodzicu.

A nie da się tego zrobić inaczej za pomocą CSS na podstawie mojego przykładu, a przecież nie będę ustawiał tego marginesu dla wszystkich dzieci rodzica z tego

<div id="jeden" style="padding:10px;overflow:auto;width:150px; background-color: yellow;">
    <div id="dwa" style="display:flex;flex-direction:row;border: 1px solid lightgrey;width:200px;height:100px;">
      <div style="flex:1 0 auto; background-color:red">div - 1</div>
      <div style="flex:1 0 auto; background-color:blue">div - 2</div>
    </div>
   <div id="trzy" style="display:flex;flex-direction:row;border: 1px solid black;width:200px;height:100px;">
      <div style="flex:1 0 auto; background-color:white">div - 1</div>
      <div style="flex:1 0 auto; background-color:grey">div - 2</div>
   </div>
    <div id="cztery" style="display:flex;flex-direction:row;border: 1px solid lightgrey;width:200px;height:100px;">
      <div style="flex:1 0 auto; background-color:red">div - 1</div>
      <div style="flex:1 0 auto; background-color:blue">div - 2</div>
    </div>
 </div>

do tego:

<div id="jeden" style="overflow:auto;width:150px; background-color: yellow;">
    <div id="dwa" style="display:flex;flex-direction:row;border: 1px solid lightgrey;width:200px;height:100px;padding:10px">
      <div style="flex:1 0 auto; background-color:red">div - 1</div>
      <div style="flex:1 0 auto; background-color:blue">div - 2</div>
    </div>
   <div id="trzy" style="display:flex;flex-direction:row;border: 1px solid black;width:200px;height:100px;padding:10px;">
      <div style="flex:1 0 auto; background-color:white">div - 1</div>
      <div style="flex:1 0 auto; background-color:grey">div - 2</div>
   </div>
    <div id="cztery" style="display:flex;flex-direction:row;border: 1px solid lightgrey;width:200px;height:100px;padding:10px">
      <div style="flex:1 0 auto; background-color:red">div - 1</div>
      <div style="flex:1 0 auto; background-color:blue">div - 2</div>
    </div>
 </div>

No to poustawiaj klasy do elementów i im przypisz style, a nie używaj styli inline. Będzie potem prościej.

gabus napisał(a):

A nie da się tego zrobić inaczej za pomocą CSS na podstawie mojego przykładu, a przecież nie będę ustawiał tego marginesu dla wszystkich dzieci rodzica z tego

to zrób se:

DIV.jeden > DIV {
  padding:10px;
}

I masz z głowy