Właściwość display:flex nie rozciąga elementów w pionie.

0

Witam
Jak to jest, że tutaj wszystko jest pięknie
111111.jpg
A u mnie a kodzie

<html lang="Pl">
    <head>
        <meta charset="UTF8">
         <style>#id_1{}
.nonpointer{cursor: pointer;}a{color:yellow;text-decoration:none;font-family: "Times New Roman", Times, serif;font-size:18px;}b{font-family: "Times New Roman", Times, serif;}html{background-color:black;color:yellow;}select{background-color:black;color:white;border-radius:4px;border:2px solid white;}</style>
        </head>
<body style="height:97%;width:97%;margin:1% 1% 1% 1%;position:absolute;border-radius:12px 12px;border:2px solid grey;">
<div style="display:flex;">    
 <div id="id_1" style="height:100%;display:flex;background-color:red;margin:2% 2% 2% 2%;flex-direction:column;align-items:center;height:100%;width:20%;border-radius:6px 6px;border:2px solid grey;">

aaaaaa
bbb

     
   </div> 
   <div style="flex-basis:100%;display:flex;top:2%;width:69%;flex-direction:column;border-radius:6px 6px;border:2px solid grey;background-color:green;">

   </div>  
</div>
</body>
</html>

wychodzi taka popierdułka
111111a.jpg
Nie oceniam tego, że zielony element ma taką wysokość a nie inna, widać ktoś uznał że taka jest odpowiednia(choć ciekawi mnie dlaczego akurat tyle).
Jak dam w zielonym elemencie height:100% (bo chcę żeby to było na wysokość okna) to się robi cienka linia. Jak dam position:absolute (np. w zielonym elemencie) to powiększa tak jak chcę ale ignoruje to że jest wewnątrz div(przesuwa w lewo).
Jak widać na pierwszym zdjęciu jest tylko display:flex i ładnie bez niczego rozciąga elementy na wysokość obiektu nadrzędnego. U mnie nie chce.
:(
????

1

W pierwszym przykladzie element z display: flex ma dodatkowo określoną wysokość przez height: 300px

<div style="display: flex; height: 300px">
  <div>Pierwsza kolumna</div>
  <div>Druga kolumna</div>
</div>
0

To nie to samo co u mnie "<div id="id_1" style="height:100%;..." ?
Rozumiem , że to hierarchicznie wszystko na każdym poziomie potrzebuje mieć określone wymiary?
I że problemem jest to , że

 <div style="display:flex;">

nie ma określonego rozmiaru ustawionego.

1
johnny_Be_good napisał(a):

To nie to samo co u mnie "<div id="id_1" style="height:100%;..." ?
Rozumiem , że to hierarchicznie wszystko na każdym poziomie potrzebuje mieć określone wymiary?

Jest w obu przypadkach lekka różnica, bo standardowo znacznik html dopasowuje swoją wysokość i szerokość do zawartości, którą posiada.

Jeśli ustawisz np height: 100% w takim przypadku

<main style="height: 600px; background: black">
  <div style="background: red;">
    <section style="height: 100%; background: blue">
      <!-- -->
    </section>
  </div>
</main>

To znacznik section dopasuje się do znacznika wyżej w hierarchii, czyli naszego div z standardową wysokością, a nie main, które ma 600px.

Dobrze by było gdybyś skasował z swojego przykładu wszystkie position: absolute, height i wewnątrz elementów dodał zwykły tekst żeby sprawdzić jak wtedy zmieni się ten przykład.

johnny_Be_good napisał(a):

I że problemem jest to , że

 <div style="display:flex;">

nie ma określonego rozmiaru ustawionego.

W tym wypadku tak

0

111111.jpg
Rozumiem, położenie reguluję nie za pomocą "top" tylko "margin"
I to faktycznie działa, tylko niepokoi mnie, że użycie "margin" na lewym elemencie wpływa na prawy. Tak powinno być?
Nie ma takiej opcji "flex:restricted;" która by ograniczała możliwości tego flex?

0
johnny_Be_good napisał(a):

Rozumiem, położenie reguluję nie za pomocą "top" tylko "margin"
I to faktycznie działa, tylko niepokoi mnie, że użycie "margin" na lewym elemencie wpływa na prawy. Tak powinno być?
Nie ma takiej opcji "flex:restricted;" która by ograniczała możliwości tego flex?

Powinno się używać align-items / align-self do "przesuwania góra, dół", oraz justify-content do "przesuwania lewo, prawo"

Tutaj masz wytłumaczone jak to dokładnie działa
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

1 użytkowników online, w tym zalogowanych: 0, gości: 1